Javascript React中同级组件之间交换对象的正确方法

我正试图构建一个简单的React应用程序，却陷入了困境。我的结构如下：

App.js

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}

PlanMenu.js

类平面菜单扩展了React.Component{
render（）{
返回(
墙
);
}
}

PlanBuilder.js

类PlanBuilder扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
对象：[]
};
}
添加对象（对象）{
这是我的国家({
对象：[…this.state.objects，对象]
});
}
render（）{
返回(
{
this.state.objects.map（函数（对象）{
返回object.render（）；
})
}
);
}

---

因此，主要的想法是我有两个兄弟组件：绘图区域和菜单。当按下菜单上的按钮时，我想创建一个新对象并将其发送到绘图区域元素。因此，问题是如何将

PlanBuilder.addObject

方法传递到

PlanMenu

类。我来自C世界，我从ink将传递一个指向

平面菜单的函数指针。但是，我不确定这是否是一个合适的解决方案。请在React中向我推荐正确的方法，好吗？提前谢谢。
在这种情况下，您有两种方法

更简单的方法是将PlanBuilder上的逻辑移动到应用程序，并将必要的道具传递到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>
    );
  }
}

类平面菜单扩展了React.Component{
render（）{
const{addObject}=this.props
返回(
墙
);
}
}
类PlanBuilder扩展了React.Component{
render（）{
const{objects}=this.props
返回(
{objects.map（函数（对象）{
返回object.render（）；
})}
)
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
对象：[]
};
this.addObject=this.addObject.bind（this）
}
添加对象（对象）{
这是我的国家({
对象：[…this.state.objects，对象]
});
}
render（）{
const{objects}=this.state
返回(
);
}
}

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

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

类平面菜单扩展了React.Component{
render（）{
const{addObject}=this.props
返回(
墙
);
}
}
类PlanBuilder扩展了React.Component{
render（）{
const{objects}=this.props
返回(
{objects.map（函数（对象）{
返回object.render（）；
})}
)
}
}
类PlanContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
对象：[]
};
this.addObject=this.addObject.bind（this）
}
添加对象（对象）{
这是我的国家({
对象：[…this.state.objects，对象]
});
}
render（）{
const{objects}=this.state
返回(
)
}
}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}

在我看来，创建容器可以使代码更可读、可重用和更干净：）

希望有帮助！
可以通过道具调用函数，我假设您希望通过向其添加新对象来更改状态。您可以做的是在父组件和addObject（）中创建状态也应该在父组件中实现，您可以通过道具将此方法传递给子组件，就像将状态传递给另一个子组件一样。我建议使用中心状态管理工具（如redux）将提供更有效的方法来处理复杂场景。此链接可能有助于将方法传递给子组件同级组件。因此，您需要使用父级和子级组件或全局状态。您需要在父级组件中创建函数，并将数据保存在状态中。然后将函数及其值传递给子级，并且在需要时，从子级调用函数或使用其当前值。您可以与我们共享
addObject（）
function implementation？非常感谢！我只想告诉未来的读者，我的代码中有一个问题：不是
onClick={addObject（…）}
而是
onClick={（）=>{addObject（…）}
。第一条指令正在调用函数，但第二条指令正在传递它。@kasom今天我根据你的问题写了一篇关于Medium的文章！你可以在这里阅读：