在父母的状态改变后反应更新孩子的道具

Question

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

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

问题是属性是在回调触发之前设置的。我在想setTimeout，但这似乎很粗糙。我知道UNSAFE_componentWillReceiveProps()，但文档不推荐它。这个用例有什么反应吗？

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;

Answer 1

新的 Context 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>
      ); 
  }
}

现在看起来很简单，说明我学到了很多东西！让我知道我是否可以在这里改进。

Answer 2

那么有更多可能的选择如何实现这个结果

条件渲染

只有当 props 改变了那个menas时，你才能渲染<Sidebar>

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

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

未定义/错误道具的保护组件

Sidebar.js

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

  return ( ... )
}

使用 getDerivedState 将道具转换为状态

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Sidebar.js

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

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

使用上下文（遗留上下文）

class Notes extends React.Component {
 getEditorState(state) {
    console.log(state)
    this.setState({editorState: state})
  }

  getChildContext() {
    return {
      editorState: this.state.editorState
    }
  }

  childContextTypes = {
    editorState: PropTypes.oneOfType([PropTypes.obj, PropTypes.bool])
  }
}

Sidebar.js

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

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