javascript - React - 使用不断变化的 Pros 渲染对象

Question

简单地说，我想构建一个界面，用户可以通过该界面将对象插入到 div 中。

用户应该能够选择放置的对象并更改其设置(颜色、大小、旋转......)。

我是一个全新的 react 者，并且已经将我的想法付诸实践。

class Elements extends React.Component {
constructor(props) {
    super(props);
    this.displayData = [];

    this.state = {
        showdata: this.displayData,
        elementData: {
            color: "red",
        }
    };
    this.addDiv = this.addDiv.bind(this);
    this.switchColor = this.switchColor.bind(this);
    this.giveConsoleData = this.giveConsoleData.bind(this);
};

giveConsoleData(){
    console.log(this.state);
}
switchColor() {
    if(this.state.elementData.color == "red"){
        this.setState({
            showdata: this.displayData,
            elementData: {
                color: "blue",

            }
        });
    }else if(this.state.elementData.color == "blue"){
        this.setState({
            showdata: this.displayData,
            elementData: {
                color: "red",

            }
        });
    }
}
addDiv() {
    this.displayData.push(<div style={this.state.elementData} ><FaArrowUp size={32} /></div>);
    this.setState({
        showdata : this.displayData
    });
}
render() {
    const items = this.state.showdata.map(i => <li>{i}</li>);
    return (
        <div>
            <Button type="submit" block variant="primary" onClick={this.addDiv}>Primary</Button>< br/>
            <Button type="submit" block variant="primary" onClick={this.switchColor}>ChangeColor</Button>< br/>
            <Button type="submit" block variant="primary" onClick={this.giveConsoleData}>Consolenlog</Button>< br/>


            {items}

            <div style={this.state.elementData}><h1>I Can Change</h1></div>

        </div>
    );
}
}

export default Elements;

我现在的问题是 h1 标题可以改变颜色，但已经放置的对象不能。

我的方法完全错误吗？

当您推送 div 元素时，是否可能会保存当前颜色值而不是状态中的颜色元素？

Answer 1

用一些代码将我的评论编译成答案:

它认为你的怀疑是正确的。我会通过this.state.elementData到 render() 中的组件不在addDiv()中。

我也不建议将 React 组件存储在数组中。我将数据存储在数组中，然后在渲染函数中，根据数据决定渲染什么。以您当前的示例为例，您的 displayData 唯一的事情就是需要跟踪的是要渲染的项目数。然后在渲染中你可以简单地渲染那么多 <div style={this.state.elementData} ><FaArrowUp size={32} /></div> s。

以下是我如何更改您的代码(尽管有点仓促)以尝试您所描述的内容:

更新的CodePen:https://codepen.io/zekehernandez/pen/RwPLavZ

class Elements extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        showdata: [],
        elementData: {
            color: "red",
        }
    };
    this.addDiv = this.addDiv.bind(this);
    this.switchColor = this.switchColor.bind(this);
    this.giveConsoleData = this.giveConsoleData.bind(this);
};

giveConsoleData(){
    console.log(this.state);
}
switchColor() {
    if(this.state.elementData.color == "red"){
        this.setState({
            elementData: {
                color: "blue",

            }
        });
    }else if(this.state.elementData.color == "blue"){
        this.setState({
            elementData: {
                color: "red",

            }
        });
    }
}
addDiv() {
  this.setState((state, props) => {
    showdata : state.showdata.push(state.showdata.length)
  });
}
render() {

    return (
        <div>
            <button type="submit" block variant="primary" onClick={this.addDiv}>Add Object</button>< br/>
            <button type="submit" block variant="primary" onClick={this.switchColor}>ChangeColor</button>< br/>
            <button type="submit" block variant="primary" onClick={this.giveConsoleData}>Consolenlog</button>< br/>


            {this.state.showdata.map(itemIndex => (
              <div style={this.state.elementData} >item: {itemIndex}</div>
            ))} 

            <div><h1 style={this.state.elementData}>I Can Change</h1></div>

        </div>
    );
  }
}

React.render(<Elements />, document.getElementById('app'));