Javascript 反应-使用更改的道具渲染对象

简单地说，我想构建一个用户可以将对象插入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;

类元素扩展React.Component{
建造师（道具）{
超级（道具）；
this.displayData=[]；
此.state={
showdata:this.displayData，
元素数据：{
颜色：“红色”，
}
};
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==“红色”）{
这是我的国家({
showdata:this.displayData，
元素数据：{
颜色：“蓝色”，
}
});
}else if（this.state.elementData.color==“蓝色”）{
这是我的国家({
showdata:this.displayData，
元素数据：{
颜色：“红色”，
}
});
}
}
addDiv（）{
this.displayData.push（）；
这是我的国家({
showdata:this.displayData
});
}
render（）{
const items=this.state.showdata.map（i=>
{i}
）；
返回(
初级

变色

控制台日志

{items}
我可以改变
);
}
}
导出默认元素；

我现在的问题是

h1

标题可以更改颜色，但是已经放置的对象不能更改颜色

我有完全错误的方法吗

---

是否当您按下div元素时，当前颜色值被保存，而不是状态中的颜色元素？

用一些代码将我的注释编译成答案：

---

我认为你的怀疑是对的。我将在

render（）

中，而不是在

addDiv（）

中，将

this.state.elementData

传递给您的组件

---

我也不建议将React组件存储在阵列中。我会将数据存储在数组中，然后在渲染函数中，根据数据决定渲染什么。在当前示例中，

displayData

唯一需要跟踪的就是要渲染多少项。然后在render中，您可以简单地渲染那么多的

s

下面是我如何修改您的代码（尽管有点匆忙）以尝试您所描述的内容：

更新的代码笔：

类元素扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showdata:[]，
元素数据：{
颜色：“红色”，
}
};
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==“红色”）{
这是我的国家({
元素数据：{
颜色：“蓝色”，
}
});
}else if（this.state.elementData.color==“蓝色”）{
这是我的国家({
元素数据：{
颜色：“红色”，
}
});
}
}
addDiv（）{
this.setState（（状态，道具）=>{
showdata:state.showdata.push（state.showdata.length）
});
}
render（）{
返回(
添加对象

变色

控制台日志

{this.state.showdata.map（itemIndex=>(
项目：{itemIndex}
))} 
我可以改变
);
}
}
React.render（，document.getElementById（'app'））；

Hi@christopherGhl，你能提供一些虚拟数据的现场工作小提琴示例吗？它认为你的怀疑是对的。我会将

this.state.elementData

传递给

render（）

中的组件，而不是

addDiv（）

中的组件，我也不建议将React组件存储在数组中。我会将数据存储在数组中，然后在渲染函数中，根据数据决定渲染什么。在当前示例中，

displayData

唯一需要跟踪的就是要渲染多少项。然后在

render

中，您可以简单地渲染那么多

这对我很有帮助，谢谢。是否可以在状态中为每个对象保存不同的对象和设置？类似于：Objectlist:{Object1{Setting 1x，Setting 2x}}}Object2{Setting 1y，Setting 2z}}}绝对地，您的状态可以是任何东西（数组和对象，无论什么），您的React代码可以根据您的状态选择渲染任何东西。我在这里使用“随便什么”，因为这里有很大的灵活性。你说你是React的新手，所以我建议你通读React文档，尤其是这篇：大多数主要概念都相当简单，但在我看来，这是一个转折点。

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