Question

我正在使用srcSet以一定的宽度更改我的图像。这也工作正常，但我想动态设置图像路径/源，而不是硬编码我的源代码中的值。有没有人有任何建议我怎么做？

例如：

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

我有一个可用的箱子here。随意编辑它。

Answer 1

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

像这样：

<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。

演示

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

ReactJs从数组动态传递道具

2 个答案:

演示

有用的链接