如何在React的兩個不同元素中渲染具有兩種不同狀態的組件？

所以我知道如何從使用地圖的狀態呈現數組。
在這裏我有兩個數組在一個組件的狀態。我想呈現每個鏈接與內部的圖像。第一個圖像應該在第一個鏈接等內如何在React的兩個不同元素中渲染具有兩種不同狀態的組件？

我怎樣才能實現這與React？

<a href={}> 
     <img src={} /> 
    </a> 

this.state = { 

links: [ 
    'https://www.google.com', 
    'https://www.youtube.com', 
    'https://twitter.com/' 
    ], 

images: [ 
    'https://static.pexels.com/photos/380863/pexels-photo-380863.jpeg', 
    'https://static.pexels.com/photos/350772/pexels-photo-350772.jpeg', 
    'https://static.pexels.com/photos/289506/pexels-photo-289506.jpeg' 
    ] 
    }

來源

2017-07-02 Allan

不知道我是否正確理解這一點，但是你不能通過'this.state.links'映射並使用索引指向'this.state.images'中的每個元素？ – qwertyuip9

你可以做這樣的事情：

render() { 
    const { links, images } = this.state; 
    return links.map((href, i) => (
     <a href={href}> 
      <img src={images[i]} /> 
     </a> 
    )); 
}

請確保您有相同數量的鏈接和圖片，否則你就會有一個問題，如果你有比圖像更多的聯繫。我不知道你的代碼的其餘部分是什麼，但它很可能是有意義的改變你的數據結構是這樣的：

const links = [ 
    { 
    href: 'https://www.google.com', 
    src: 'https://static.pexels.com/photos/380863/pexels-photo-380863.jpeg' 
    }, 
    ... 
];

而且，如果該組件的作用是隻顯示鏈接，你應該讓無狀態是這樣的：

function Link({ href, src }) { 
    return (
    <a href={href}> 
     <img src={src} /> 
    </a> 
); 
} 

function Links({ links }) { 
    return links.map(link => <Link {...link} />); 
}

來源

2017-07-02 15:31:56

如果你有lodash或類似的，你可以使用['zip']（https://lodash.com/docs#zip）。 –

如果你的數據是密切相關的，我還會用第二種方法重構你的狀態並映射到對象上。它更簡潔，更容易更新狀態並將數據傳遞給其他組件。另外，你應該考慮創建一個無狀態的功能組件，它只需要一個鏈接和一個圖像，並在父組件中呈現並保持狀態。這樣你可以更好地分離關注點。 – trixn

你可以使一個物體在你的狀態，其中對象的關鍵是鏈接和值是圖像鏈接，然後使用它是這樣的：

{Object 
     .keys(this.props.links) 
     .map(renderLink)}

現在你需要renderLink功能的組件內部：

renderLink(key) { 
     const image = this.props.links[key]; 
     return (
     <a href={key}> 
      <img src={image} /> 
     </a> 
    ); 
    }

您還需要記住這個方法綁定到組件

constructor() { 
     super(); 
     this.renderLink = this.renderLink.bind(this); 
    }

來源

2017-07-02 15:35:48

我覺得更清潔的方法是做一樣的zipObject功能從Lodash庫。

const links = [ 
 
    'https://www.google.com', 
 
    'https://www.youtube.com', 
 
    'https://twitter.com/' 
 
]; 
 

 
const images = [ 
 
    'https://static.pexels.com/photos/380863/pexels-photo-380863.jpeg', 
 
    'https://static.pexels.com/photos/350772/pexels-photo-350772.jpeg', 
 
    'https://static.pexels.com/photos/289506/pexels-photo-289506.jpeg' 
 
]; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    const {links, images} = props; 
 
    
 
    this.state = { 
 
     linksWithImage: _.zipObject(links, images), 
 
    }; 
 
    } 
 
    
 
    render() { 
 
    const {linksWithImage} = this.state; 
 
    
 
    return (
 
     <div> 
 
     {_.map(linksWithImage, (image, link) => (
 
      <a href={link}> 
 
      <img src={image} /> 
 
      </a> 
 
     ))} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App links={links} images={images} />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 
 

 
<div id="app"></div>

來源

2017-07-02 15:38:07 soywod

你應該重新調整你的國家，像@Elie Gnrd建議。使用對象的數組，其中包含一對鏈接和圖像：

{ 
    href: 'https://www.google.com', 
    src: 'https://static.pexels.com/photos/380863/pexels-photo-380863.jpeg' 
}

然後你就可以重構你的代碼是這樣的：

const Link = (link, img) => (
    <a href={link}> 
    <img src={img} /> 
    </a> 
); 

class LinkList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {links: props.links}; 
    } 

    render() { 
    const {links} = this.props; 

    return (
     {links.map(link => <Link {...link} />)} 
    ); 
    } 
}

這樣它會更容易通過鏈接別處並更新狀態。注意：最好的做法是提取渲染邏輯，如「如何渲染帶有圖像的單個鏈接」到無狀態的功能組件中。這樣你的代碼將更容易閱讀，測試和維護。

來源

2017-07-02 15:56:10 trixn

如何在React的兩個不同元素中渲染具有兩種不同狀態的組件？

回答

相關問題