如何在React的两个不同元素中渲染具有两种不同状态的组件？

Question

所以我知道如何从使用地图的状态呈现数组。
在这里我有两个数组在一个组件的状态。我想呈现每个链接与内部的图像。第一个图像应该在第一个链接等内

我怎样才能实现这与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建议。使用对象的数组，其中包含一对链接和图像：

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

这样它会更容易通过链接别处并更新状态。注意：最好的做法是提取渲染逻辑，如“如何渲染带有图像的单个链接”到无状态的功能组件中。这样你的代码将更容易阅读，测试和维护。