为什么是 React.Children.only? [英] Why React.Children.only?

问题描述

反应大师的快速问题;)

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

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

解决方案

正如 文档

<块引用>

验证孩子只有一个孩子(一个 React 元素)并返回它.否则这个方法会抛出错误.

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

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

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

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

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

class GraphEditorEditor 扩展 React.Component {componentDidMount() {this.props.editor.makeEditable();//和所有其他编辑器特定的逻辑}使成为() {返回空；}}类 GraphEditorPreview 扩展 React.Component {componentDidMount() {this.props.editor.makePreviewable();//和所有其他预览特定的逻辑}使成为() {返回空；}}类 GraphEditor 扩展 React.Component {静态编辑器 = GraphEditorEditor;静态预览 = GraphEditorPreview;wrapperRef = React.createRef();状态 = {编辑器初始化:false}componentDidMount() {//实例化基础图以在逻辑子组件中使用this.editor = SomeService.createEditorInstance(this.props.config);this.editor.insertSelfInto(this.wrapperRef.current);this.setState({ editorInitialized: true });}使成为() {返回 (<div ref={this.wrapperRef}>{this.editorInitialized ?React.Children.only(React.cloneElement(this.props.children,{ 编辑器:this.editor })) : 空值}

);}}

可以这样使用:

class ParentContainer 扩展 React.Component {使成为() {返回 (<GraphEditor config={{some: "config"}}><GraphEditor.Editor>//<-- 编辑模式</GraphEditor>)}}//或者class ParentContainer 扩展 React.Component {使成为() {返回 (<GraphEditor config={{some: "config"}}><GraphEditor.Preview>//<-- 预览模式</GraphEditor>)}}

希望对您有所帮助.

Quick question for react gurus ;)

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?

EDIT: 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.

解决方案

As pointed out in the docs

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

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.

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

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

which can be used like this:

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

Hope this is helpful.

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