React - 使用不断变化的道具渲染对象

Question

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

用户应该能够选择放置的对象并更改它们的设置（颜色、大小、旋转......）。

我是全新的反应，并将我的想法付诸实践。

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'));