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