Reactjs 反应更新子项'；在父项之后放置道具'；s状态变化

我正在尝试将Draft.js的编辑器状态从编辑器组件传递到我自己的

侧栏
组件

使用最顶层的组件
Notes
我使用回调从
CustomEditor
获取编辑器状态，并将其设置为
Notes
状态。然后，我将该状态作为道具传递到侧栏

问题是在回调触发之前设置了道具。我在考虑设置超时，但这似乎很粗糙。我知道
不安全的组件将接收props（）
，但文档不建议这样做。对于这个用例，react中有什么东西吗

export class Notes extends Component {
  constructor(props) {
    super(props);
    this.getEditorState = this.getEditorState.bind(this)
    this.state = {
      editorState: "the placeholder data Sidebar should not have as a prop"
    };
  }

  getEditorState(state) {
    console.log(state)
    this.setState({editorState: state})
  }

  render() {
    return (
      <section id="Notes">
        <div id="editor-holder">
          <Sidebar currentEditorState={this.state.editorState}/>
          <div id="Editor">
            <FileHeader />
            <CustomEditor getState={this.getEditorState}/>
          </div>
        </div>
      </section>
    );
  }

}

export default Notes;

导出类注释扩展组件{
建造师（道具）{
超级（道具）；
this.getEditorState=this.getEditorState.bind（this）
此.state={
editorState:“占位符数据侧栏不应作为道具”
};
}
getEditorState（州）{
console.log（状态）
this.setState（{editorState:state}）
}
render（）{
返回(
);
}
}
导出默认票据；
那么，如何实现这一结果，还有更多可能的选择

条件渲染
只有当道具更改了菜单时，才能渲染

constructor(props)
  super(props)
  this.state = {
    editorState: false
  }
}

render() {
 ... {this.state.editorState && <Sidebar currentEditorState={this.state.editorState}/>}
}

使用getDerivedState将道具转换为状态

侧边栏.js

render() {
  if(!this.props.currentEditorState) return null // this will force React to render nothing

  return ( ... )
}

static getDerivedStateFromProps({ currentEditorState }, prevState) {
  if(currentEditorState !== false {
   return { currentEditorState }
  } else {
   return {}
  }
}

render() {
  (.... something bound to this.state.currentEditorState)
}

class Sidebar {
  static contextTypes = {
    editorState: PropTypes.oneOfType([PropTypes.obj, PropTypes.bool])
  }

  render() {
    ... this.context.editorState
  }
}

使用上下文（遗留上下文）
侧边栏.js

render() {
  if(!this.props.currentEditorState) return null // this will force React to render nothing

  return ( ... )
}

static getDerivedStateFromProps({ currentEditorState }, prevState) {
  if(currentEditorState !== false {
   return { currentEditorState }
  } else {
   return {}
  }
}

render() {
  (.... something bound to this.state.currentEditorState)
}

class Sidebar {
  static contextTypes = {
    editorState: PropTypes.oneOfType([PropTypes.obj, PropTypes.bool])
  }

  render() {
    ... this.context.editorState
  }
}

新的上下文API就是这类问题的解决方案。我花了一点时间才弄明白，但我想到的是作为道具的
editorState
到
Sidebar

  export const NoteContext = React.createContext("placeholderEditorState");

  export class Notes extends Component {
    constructor(props) {
      super(props);
      this.getEditorState = this.getEditorState.bind(this)
      this.getFolderData = this.getFolderData.bind(this)
      this.state = {
        editorState: null,
        folderData: null
      };
    }

    getEditorState(state) {
      this.setState({editorState: state});
    }

    getFolderData(data) {
      this.setState({folderData : data})
    }

    render() {
      return (
        <section id="Notes">
          <TopBar />
          <div id="editor-holder">

            <NoteContext.Provider value={{editorState: this.state.editorState}} >
              <NoteContext.Consumer>
                {(context)=>{ return (
                  <Sidebar currentEditorState={context.editorState} getFolderData={this.getFolderData}/>
                )}}
              </NoteContext.Consumer>
            </NoteContext.Provider>

              <div id="Editor">

                <NoteContext.Provider value={{folderData: this.state.folderData}} >
                  <FileHeader />
                </NoteContext.Provider>

                <CustomEditor getState={this.getEditorState}/>
              </div>

          </div>
        </section>
      ); 
  }
}

export const NoteContext=React.createContext（“占位符编辑器状态”）；
导出类Notes扩展组件{
建造师（道具）{
超级（道具）；
this.getEditorState=this.getEditorState.bind（this）
this.getFolderData=this.getFolderData.bind（this）
此.state={
editorState:null，
folderData:空
};
}
getEditorState（州）{
this.setState（{editorState:state}）；
}
getFolderData（数据）{
this.setState（{folderData:data}）
}
render（）{
返回(
{（上下文）=>{return(
)}}
); 
}
}

现在看来，这似乎很简单，这意味着我学到了很多！让我知道我是否可以在这里改进任何东西。
那么，我假设我的用例有点独特，对吗？你认为有更好的方法来设计我的数据流吗？你的情况很正常，通常是用道具
延迟
来呈现孩子，例如当父组件充当数据加载器并传递道具时。同样的流程也在模态中完成，例如，在模态中，您有一个按钮，该按钮将
状态.isOpen
设置为true，子模态组件打开。然而，将状态从一个组件传递到另一个组件看起来像反模式。我会考虑将集中存储作为ReDux/MuBx，或者如果您不想使用它，可以使用Read <代码>上下文< /代码>自动共享状态。我将查看<代码>上下文< /代码>作为解决方案。这似乎是React对这个案例的解决方案。从我读到的文档来看，您使用的是旧的上下文API。这是因为遗留上下文API最适合这种情况吗？我可以理解，对于这个小问题，新的API看起来需要做很多工作。看看它的“未来”遗产。新的一个是30天前引入的，我并没有在生产环境中进行测试，所以我不想发布我不熟悉的代码，但当然可以随意使用新的上下文