为什么选择 React.Children.only？

Question

反应大师的快速问题;）

React.Children.only 是它的顶级 api 之一，react-redux (<Provider />) 和 React Router (<Router />) 非常常用来将 store/router 作为上下文注入，这背后的原因是什么，为什么不简单地return props.children？好像和 JSX 有关系？

编辑：请不要解释什么是React.Children.only，我问的是为什么使用它而不是props.children，这似乎更强大/灵活。

Answer 1

正如docs中指出的那样

验证 children 只有一个子元素（一个 React 元素）并返回它。否则这个方法会报错。

那么现在为什么它比仅使用 props.children 更有帮助？

主要原因是它抛出了一个错误，从而停止了整个开发流程，所以你不能跳过它。

这是一个方便的实用程序，它强制执行特定且只有一个孩子的规则。

当然，您可以使用propTypes，但这只会在控制台中发出警告，您可能会错过。

React.Children.only 的一个用例可以是强制执行应由一个逻辑子组件组成的特定声明性接口：

class GraphEditorEditor extends React.Component {
  componentDidMount() {
    this.props.editor.makeEditable();
    // and all other editor specific logic
  }

  render() {
    return null;
  }
}

class GraphEditorPreview extends React.Component {
  componentDidMount() {
    this.props.editor.makePreviewable();
    // and all other preview specific logic
  }

  render() {
    return null;
  }
}

class GraphEditor extends React.Component {
  static Editor = GraphEditorEditor;
  static Preview = GraphEditorPreview;
  wrapperRef = React.createRef();

  state = {
    editorInitialized: false
  }

  componentDidMount() {
    // instantiate base graph to work with in logical children components
    this.editor = SomeService.createEditorInstance(this.props.config);
    this.editor.insertSelfInto(this.wrapperRef.current);

    this.setState({ editorInitialized: true });
  }

  render() {
    return (
      <div ref={this.wrapperRef}>
        {this.editorInitialized ?
          React.Children.only(
            React.cloneElement(
              this.props.children, 
              { editor: this.editor }
            )
          ) : null
        }
      </div>
    );
  }
}

可以这样使用：

class ParentContainer extends React.Component {
  render() {
    return (
      <GraphEditor config={{some: "config"}}>
        <GraphEditor.Editor> //<-- EDITOR mode
      </GraphEditor>
    )
  }
}

// OR

class ParentContainer extends React.Component {
  render() {
    return (
      <GraphEditor config={{some: "config"}}>
        <GraphEditor.Preview> //<-- Preview mode
      </GraphEditor>
    )
  }
}

希望这有帮助。

Answer 2

Before React 16，组件的渲染方法无法返回元素数组。当实现一个没有引入任何自己的标记的组件时，你别无选择，只能接受一个孩子：

// We have to ensure that there's only one child, because returning an array
// from a component is prohibited.
const DisplayIf = ({children, condition}, {uniforms}) =>
    condition(uniforms) ? Children.only(children) : nothing;
DisplayIf.contextTypes = BaseField.contextTypes;

现在您可以简单地return props.children，要求调用者在数组元素中包含keys，或者return <>{props.children}</>，使用Fragment 来避免返回数组：

const DisplayIf = ({children, condition}, {uniforms}) =>
    condition(uniforms) ? <>{children}</> : nothing;
DisplayIf.contextTypes = BaseField.contextTypes;