React 兄弟組件之間交換對象的正確方式

Question

我正在嘗試構建一個簡單的 React 應用程序，但遇到了麻煩。 我有以下結構：

應用程序.js

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <PlanBuilder />
        <PlanMenu />
      </div>
    );
  }
}

計划菜單.js

class PlanMenu extends React.Component {
  render() {
    return (
      <div className="PlanMenu">
        <button type="button"
          onClick={addObject(
            new CWall({
                x: 100,
                y: 100,
                length: 200
            }))}>Wall
        </button>
      </div>
    );
  }
}

計划建造者.js

class PlanBuilder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      objects: []
    };
  }

  addObject(object) {
    this.setState({
        objects: [...this.state.objects, object]
    });
  }

  render() {
    return (
      <Stage>
        <Layer>
          {
          this.state.objects.map(function(object) {
              return object.render();
            })
          }
        </Layer>
      </Stage>
    );
}

所以主要的想法是我有兩個兄弟組件：繪圖區域和菜單。 當菜單上的按鈕被按下時，我想創建一個新對象並將其發送到繪圖區域元素。 所以，問題是如何將PlanBuilder.addObject方法傳遞給PlanMenu類。 我來自 C 世界，我想到的是將PlanMenu函數指針傳遞給PlanMenu 。 但是，我不確定這是一個合適的解決方案。 你能推薦我在 React 中執行此操作的正確方法嗎？ 先感謝您。

Answer 1

在這種情況下，您有兩種方法。

更簡單的一種是將您在 PlanBuilder 上的邏輯移動到 App，並將必要的道具傳遞給 PlanBuilder 和 PlanMenu，例如：

class PlanMenu extends React.Component {
  render() {
    const { addObject } = this.props

    return (
      <div className="PlanMenu">
        <button type="button"
          onClick={addObject(
            new CWall({
                x: 100,
                y: 100,
                length: 200
            }))}>Wall
        </button>
      </div>
    );
  }
}

class PlanBuilder extends React.Component {
  render() {
    const { objects } = this.props

    return (
      <Stage>
        <Layer>
          {objects.map(function(object) {
            return object.render();
          })}
        </Layer>
      </Stage>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      objects: []
    };

    this.addObject = this.addObject.bind(this)
  }

  addObject(object) {
    this.setState({
        objects: [...this.state.objects, object]
    });
  }

  render() {
    const { objects } = this.state

    return (
      <div className="App">
        <PlanBuilder objects={objects} />
        <PlanMenu addObject={this.addObject} />
      </div>
    );
  }
}

另一種選擇是創建一個“容器”來保存邏輯而不是將其添加到 App，例如：

class PlanMenu extends React.Component {
  render() {
    const { addObject } = this.props

    return (
      <div className="PlanMenu">
        <button type="button"
          onClick={addObject(
            new CWall({
                x: 100,
                y: 100,
                length: 200
            }))}>Wall
        </button>
      </div>
    );
  }
}

class PlanBuilder extends React.Component {
  render() {
    const { objects } = this.props

    return (
      <Stage>
        <Layer>
          {objects.map(function(object) {
            return object.render();
          })}
        </Layer>
      </Stage>
    )
  }
}

class PlanContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      objects: []
    };

    this.addObject = this.addObject.bind(this)
  }

  addObject(object) {
    this.setState({
        objects: [...this.state.objects, object]
    });
  }

  render() {
    const { objects } = this.state

    return (
      <div>
        <PlanBuilder objects={objects} />
        <PlanMenu addObject={this.addObject} />
      </div>
    )
  }
}

class App extends React.Component {

  render() {
    return (
      <div className="App">
        <PlanContainer />
      </div>
    );
  }
}

在我看來，創建一個 Container 會讓你的代碼更具可讀性、可重用性和更干凈:)

希望有幫助！