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>。

这是我修改您的代码（尽管有些仓促）以尝试您描述的方法：

更新的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'));

反应-使用变化的道具渲染对象

1 个答案: