ReactJs 从数组动态传递道具

Question

我正在使用 srcSet 以特定宽度更改我的图像。这也可以正常工作，但我想动态设置图像 path/source 而不是对源代码中的值进行硬编码。有没有人对我如何做到这一点有任何建议？

例如：

this.props.personas[this.state.index].images[0].mediaSize

我有可用的垃圾桶 here。欢迎编辑。

Answer 1

您可以在 this.props.personas[this.state.index].images 上使用 map 来动态创建源。

像这样：

<picture>         
    {this.props.personas[this.state.index].images.map((el,i) => {
        return  <source
                    key={i}
                    media={el.mediaSize}
                    srcSet={el.imageUrl} 
                />
    })}
    <img src={this.props.personas[this.state.index].defaultImage} />
</picture>

检查working pen。

Answer 2

您可以使用 map() 遍历图像：

<picture> 
  {this.props.personas[this.state.index].images.map((item, i) => {
    return (
      <source
        key={i}
        media={item.mediaSize}
        srcSet={item.imageUrl}
      />
    );
  })}
  <img src={this.props.personas[this.state.index].defaultImage} />
</picture>

查看下面的完整演示，或您的 bin 的修改版本，here。

演示

class Personas extends React.Component {
  
  constructor(props, context, images) {
    super(props);
    this.state = {
      index: 0
    };
  }

  changePerson  (e, index)  {
    e.preventDefault();
    this.setState({
      index: index
    });
  }

  render() {
    const thumbs = this.props.personas.map((current, idx) => {
      return (
        <a key={idx} className={'persona-link ' + (this.state.active ? 'active-link' : '')} >
          <div >
            <img src={current.thumbnail} onClick={(event) => this.changePerson(event, idx)}/>
          </div>
        </a>
      )
    });
    return (
      <div className='personas'>
        <picture> 
          {this.props.personas[this.state.index].images.map((item, i) => {
            return (
              <source
                key={i}
                media={item.mediaSize}
                srcSet={item.imageUrl}
              />
            );
          })}
          <img src={this.props.personas[this.state.index].defaultImage} />
        </picture>
        <span className='personas-thumbnail'>
          {thumbs}
        </span>
      </div>
    )
  }
}
  
ReactDOM.render(<Personas 
     personas =  {[
      {
        thumbnail: '//via.placeholder.com/90x90',
        defaultImage: '//via.placeholder.com/768x400',
        images: [
          {
            imageUrl: '//via.placeholder.com/1024x400',
            mediaSize: "(min-width: 500px)"
          },
          {
            imageUrl: '//via.placeholder.com/1027x400',
            mediaSize: "(min-width: 600px)"
          }
        ]
      }
    ]}
  
  />, document.querySelector('#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>
<div id="app"></div>

有用的链接

Array.Prototype.map()

ReactJs 从数组动态传递道具

ReactJs pass props dynamically from array

arrays

dynamic

ecmascript-6

reactjs

srcset

演示

有用的链接