在点击时渲染新元素

Question

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

我已经使用状态完成了此操作。但是我只能渲染一个 <ImageVoteItem/> 组件。每当我单击 'Add Option' 按钮时，如何一遍又一遍地渲染相同的组件？

我的class

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

不要使用 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 2

我为您添加另一个选项作为maxImage。如果您定义任何最大图像值，您可以向其添加更多图像组件。在 return 渲染之前，您可以使用循环将图像列表定义为数组，您可以在渲染元素中使用它。

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

在点击时渲染新元素

Render new elements onClick

javascript

render

reactjs