呈现新元素onClick

Question

我有一个名为<ImageVoteItem/>的ReactJS组件。我有一个名为'Add Option'的按钮。当我点击这个按钮<ImageVoteItem/>应该出现。当我再次点击该按钮时，应该出现另一个<ImageVoteItem/>组件。

我已经完成了这种使用状态。但我只能渲染一个<ImageVoteItem/>组件。当我点击'Add Option'按钮时，如何反复渲染相同的组件？

我班

class ImageVotePost extends Component { 

    constructor() { 
     super(); 

     this.state = { 
      addOption: false, 
     } 
     this.addOption = this.addOption.bind(this); 
    } 

    addOption() { 
     this.setState({ 
      addOption: true, 
     }) 
    } 

    render() { 

     return (

      <div className="padding5px margin_bottom10px"> 
       <ImageVoteItem/> 
       <ImageVoteItem/> 
       {this.state.addOption ? <ImageVoteItem/> : null} 

       <div className="image_add_btn border" onClick={this.addOption}> 
        <div className="width_100 relative_position"> 
         <img src={plus} className="plus_icon"/> 
         <a className="add_opt_text">Add Option</a> 
        </div> 
        <input type="file" id="src" className="filetype2"/> 
       </div> 
      </div> 


     ) 
    } 
} 

Answer 1

我添加另一种选择你作为maxImage。如果你定义了任何最大图像值，你可以添加更多的图像组件。 在返回渲染之前，您可以使用循环来将图像列表定义为数组，并且您可以在渲染的元素中使用它。

class ImageVotePost extends Component { 

constructor() { 
    super(); 

    this.state = { 
     addOption: 0, 
     maxImage:10 
    } 
    this.addOption = this.addOption.bind(this); 
} 

addOption() { 
    this.setState((prevState)=>({ 
     addOption: ++prevState.addOption, 
    }) 
} 


render() { 
    let list = [] 
    for(var i =0 ;i<=this.state.maxImage;i++){ 
     list.push(<div>{this.state.addOption>i&& 
     <ImageVoteItem/>}</div>) 
    } 
    return (
     <div className="padding5px margin_bottom10px"> 
      {list} 
      <div className="image_add_btn border" onClick={this.addOption}> 
       <div className="width_100 relative_position"> 
        <img src={plus} className="plus_icon"/> 
        <a className="add_opt_text">Add Option</a> 
       </div> 
       <input type="file" id="src" className="filetype2"/> 
      </div> 
     </div> 


    ) 
} 

}

如果你不希望任何限制，你也可以使用这样的：

class ImageVotePost extends Component { 

    constructor() { 
     super(); 

     this.state = { 
      imageList: [] 
     } 
     this.addOption = this.addOption.bind(this); 
    } 

    addOption() { 
    let list = this.state.imageList; 
    list.push(<ImageVoteItem />); 
    this.setState({ 
     imageList: list 
    }) 
} 


    render() { 
     return (
      <div className="padding5px margin_bottom10px"> 
       {list} 
       <div className="image_add_btn border" onClick={this.addOption}> 
        <div className="width_100 relative_position"> 
         <img src={plus} className="plus_icon"/> 
         <a className="add_opt_text">Add Option</a> 
        </div> 
        <input type="file" id="src" className="filetype2"/> 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 2

而不是使用bool的使用将存储的ImageVoteItem计数（你要多少时间来渲染组件）的数值。然后在该状态值上使用map来呈现ImageVoteItem组件。

像这样：

class ImageVotePost extends Component { 

    constructor() { 
     super();  
     this.state = { 
      count: 1, 
     } 
     this.addOption = this.addOption.bind(this); 
    } 

    addOption() { 
     this.setState((prevState) => { 
      return {count: prevState.count + 1} 
     }) 
    } 

    _renderComponent(){ 
     let count = this.state.count, uiItems = []; 
     while(count--) 
      uiItems.push(<ImageVoteItem key={el}/>) 
     return UiItems; 
    } 

    render() { 
     return (
      <div className="padding5px margin_bottom10px"> 

       {this._renderComponent()} 

       <div className="image_add_btn border" onClick={this.addOption}> 
        <div className="width_100 relative_position"> 
         <img src={plus} className="plus_icon"/> 
         <a className="add_opt_text">Add Option</a> 
        </div> 
        <input type="file" id="src" className="filetype2"/> 
       </div> 

      </div> 
     ) 
    } 
} 

Answer 3

试试这个...

class ImageVotePost extends Component { 
     constructor() { 
      super();  
      this.state = { 
       images: [] 
      } 
     } 

     _renderComponent(){ 
      let images = this.state.images; 
      images.push(<ImageVoteItem key={images.length+1}/>); 
      this.setState({ 
      images: images 
     }); 
     } 

     render() { 
      return (
       <div className="padding5px margin_bottom10px"> 

        {this.state.images} 

        <div className="image_add_btn border" onClick={this._renderComponent()}> 
         <div className="width_100 relative_position"> 
          <img src={plus} className="plus_icon"/> 
          <a className="add_opt_text">Add Option</a> 
         </div> 
         <input type="file" id="src" className="filetype2"/> 
        </div> 

       </div> 
      ) 
     } 
    }