ReactJS从同级到同级组件传递参数

Question

我有这样的组件树：

<App />
  <NoteList />
    <Note />
  <Notes />

我正在从NoteList组件中的Notes组件运行一个函数，除了传递参数外，其他所有东西都可以正常工作。

这是我的代码：

<NoteList displayChange={() => this.content.displayNote()} />
<Notes
   ref={instance => {
        this.content = instance;
       }}
/>

这里是displayNote函数，通过NoteList组件中的displayChange调用

displayNote = test => {
  console.log("id", test)
  console.log("sibling linked!")
};

它通过NoteList组件中的一个函数运行：

callbackFunction = childData => {
    console.log("childData", childData);
    this.props.displayChange(childData);
  };

因此，当运行callbackFunction时，displayChange（）可以正常工作，但是childData不能正确传递。我的意思是当childData作为参数传递时，它最终在console.log中未定义。

对此有任何解决方案？

我有这样的组件树： 尝试在Notes组件上设置新键。