React - 使用不断变化的 Props 渲染 Objects

Question

简而言之，我想构建一个界面，用户可以使用该界面将 objects 插入 div。

用户应该能够 select 放置 objects 并更改他们的设置（颜色、大小、旋转..）。

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

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标题可以改变颜色，但是已经放置的objects不能。

我的做法完全错误吗？

是否可能是当您按下 div 元素时保存的是当前颜色值而不是来自状态的颜色元素？

Answer 1

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

它认为你的怀疑是对的。我会在 render() 中而不是 addDiv() 中将 this.state.elementData 传递给您的组件。

我也不建议将 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'));

React - 使用不断变化的 Props 渲染 Objects

React - Render Objects with changing Props

javascript

reactjs

state

react-props

react-state