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

在onClick上渲染新元素

3 个答案: