React 中的 img 键

Question

这是我的 React 组件。这个想法很简单。

如果元素在可见性传感器中，它会添加 class

动画淡入淡出 并更改隐藏 -> 显示

问题是每个 img 都需要 key 属性。

如何创建它？

 class Presentation extends React.Component{

          constructor(props){
            super(props);
            this.state = {IMG:'Need' +  'hide'};
            this.onChange = this.onChange.bind(this);
          }

          onChange(isVisible)
          {
              console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
              if(isVisible)
              {
                  this.setState( {IMG : 'animated fadeInUp' + ' show'} );
              }
          }

      render(){
        return(
            <div className="Presentation">

                                <VisibilitySensor onChange={this.onChange}/>

              <img className={this.state.IMG} src={one_two}/>
              <img className={this.state.IMG} src={one}/>
              <img className={this.state.IMG} src={three}/>
              <img className={this.state.IMG} src={two}/>
              <img className={this.state.IMG} src={four}/>
              <img className={this.state.IMG} src={five}/>
              <img className={this.state.IMG} src={six}/>
              <img className={this.state.IMG} src={seven}/>
              <img className={this.state.IMG} src={eight}/>
              <img className={this.state.IMG} src={nine}/>


            </div>
        )
      }
    };

Answer 1

将图像的 src 存储在数组中并循环遍历该数组并提供索引值作为 img 的键：

class 演示文稿扩展 React.Component{

      constructor(props){
        super(props);
        this.state = {IMG:'Need' +  'hide', 
                      srcs : [one_two,one,two,three,four,five,six,seven,eight,nine]
        };
        this.onChange = this.onChange.bind(this);

      }

      onChange(isVisible)
      {
          console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
          if(isVisible)
          {
              this.setState( {IMG : 'animated fadeInUp' + ' show'} );
          }
      }

  render(){
    return(
        <div className="Presentation">

               <VisibilitySensor onChange={this.onChange}/>

          {
               this.state.srcs.map((src,index)=>{  
                    return (<img className={this.state.IMG} key = {index} src={src}/>);
               });

          }


        </div>
    )
  }
};

React 中的 img 键

Keys img in React

image

key

reactjs

sensors