javascript - React 中兄弟组件之间交换对象的正确方法

Question

我正在尝试构建一个简单的 React 应用程序，但遇到了麻烦。我有以下结构:

App.js

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

PlanMenu.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>
    );
  }
}

PlanBuilder.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。但是，我不确定这是一个合适的解决方案。您能推荐我在 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>
    );
  }
}

另一种选择是创建一个“容器”来保存逻辑，而不是将其添加到应用程序中，例如:

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

在我看来，创建容器可以让你的代码更具可读性、可重用性和简洁性:)

希望对你有帮助!