为什么只使用React.Children. [英] Why React.Children.only?

问题描述

反应大师的快速问题;)

Quick question for react gurus ;)

React.Children.only 是其顶级API之一，并且被react-redux(< Provider/> )和React Router(< Router/> )广泛使用，以将存储/路由器作为上下文注入，这背后的原因是什么，为什么不简单地 return props.children ?似乎与JSX有关?

React.Children.only is one of its top-level apis, and is very commonly used by react-redux (<Provider />) and React Router (<Router />) to inject store/router as context, what's the reason behind this, why not simply return props.children? Seems something to do with JSX?

请不要只解释什么是React.Children.我要的是为什么而不是props.children，它似乎更强大/灵活.

Please don't explain what is React.Children.only, i am asking for why using it instead of props.children, which seems more powerful/flexible.

推荐答案

文档

验证子代只有一个子代(一个React元素)并返回它.否则，此方法将引发错误.

Verifies that children has only one child (a React element) and returns it. Otherwise this method throws an error.

那么，为什么现在仅使用 props.children 会有帮助?

So now why is it helpful over just using props.children?

主要原因是它引发了错误，因此暂停了整个开发流程，因此您无法跳过它.

The main reason is it's throwing an error, thus halting the whole dev flow, so you cannot skip it.

这是一个实用的工具，它强制执行一个规则，即明确地并且只生一个孩子.

This is a handy util that enforces a rule of having specifically and only one child.

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

Of course, you could use propTypes, but that will only put a warning in the console, that you might as well miss.

React.Children.only 的一个用例可以是强制实施特定的声明性接口，该接口应包含一个逻辑子组件:

One use case of React.Children.only can be to enforce specific declarative interface that should consist of one logical Child component:

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

希望这会有所帮助.

这篇关于为什么只使用React.Children.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！