React？の2つの異なる要素に2つの異なる状態のコンポーネントをレンダリングする方法は？

Question

マップを使って状態から配列をレンダリングする方法を知っています。
ここでは、1つのコンポーネントの状態で2つの配列があります。最初の画像は最初のリンク内にあるはずです。

これを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' 
    ] 
    } 

Answer 1

：

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} />); 
} 

Answer 2

あなたは、オブジェクトのキーがリンクされ、値は、画像へのリンクであり、このようにそれを使用するあなたの状態でオブジェクトを作ることができる：

{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); 
    } 

Answer 3

をこのメソッドをバインドすることを忘れないでくださいする必要があり、私はきれいな方法が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>

Answer 4

あなたは@Elie Gnrdが提案のように、あなたが述べる再構築する必要があります。どこかにリンクを渡すために容易になります

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} />)} 
    ); 
    } 
} 

この方法：次に、あなたがこのようなあなたのコードをリファクタリングすることができます

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

：リンクや画像のペアが含まれているオブジェクトの配列を使用します状態を更新する。副題：ステートレス機能コンポーネントに「イメージ付きの単一のリンクをレンダリングする方法」などのレンダリングロジックを抽出することをお勧めします。この方法で、コードを読みやすく、テストし、保守しやすくなります。