关于react.js:React报错之ReactChildrenonly-expected

总览

当咱们把多个子元素传递给一个只冀望有一个 React 子元素的组件时，会产生 ”React.Children.only expected to receive single React element child” 谬误。为了解决该谬误，将所有元素包装在一个 React 片段或一个关闭 div 中。

这里有个示例来展现谬误是如何产生的。

// App.js

import React from 'react';

function Button(props) {
  // 👇️ expects single child element
  return React.Children.only(props.children);
}

export default function App() {
  return (
    <Button>
      <button
        onClick={() => {console.log('Button clicked');
        }}
      >
        Click
      </button>
      <button
        onClick={() => {console.log('Button clicked');
        }}
      >
        Click
      </button>
    </Button>
  );
}

Button元素冀望传递单个子元素，但咱们在同级下传递了 2 个子元素。

React 片段

咱们能够应用 React 片段来解决该谬误。

import React from 'react';

function Button(props) {
  // 👇️ expects single child element
  return React.Children.only(props.children);
}

export default function App() {
  return (
    <Button>
      <>
        <button
          onClick={() => {console.log('Button clicked');
          }}
        >
          Click
        </button>
        <button
          onClick={() => {console.log('Button clicked');
          }}
        >
          Click
        </button>
      </>
    </Button>
  );
}

当咱们须要对子节点列表进行分组，而不须要向 DOM 增加额定的节点时，就会应用Fragments。

你可能还会看到应用了更具体的片段语法。

import React from 'react';

function Button(props) {
  // 👇️ expects single child element
  return React.Children.only(props.children);
}

export default function App() {
  return (
    <Button>
      <React.Fragment>
        <button
          onClick={() => {console.log('Button clicked');
          }}
        >
          Click
        </button>
        <button
          onClick={() => {console.log('Button clicked');
          }}
        >
          Click
        </button>
      </React.Fragment>
    </Button>
  );
}

下面的两个例子达到了雷同的后果 – 它们对子元素列表进行分组，而没有向 DOM 中增加额定的节点。

当初大多数代码编辑器都反对更扼要的语法，因而更罕用。

DOM 元素

另一个解决方案是将子元素包裹在另一个 DOM 元素中，例如一个div。

import React from 'react';

function Button(props) {
  // 👇️ expects single child element
  return React.Children.only(props.children);
}

export default function App() {
  return (
    <Button>
      <div>
        <button
          onClick={() => {console.log('Button clicked');
          }}
        >
          Click
        </button>
        <button
          onClick={() => {console.log('Button clicked');
          }}
        >
          Click
        </button>
      </div>
    </Button>
  );
}

这样就解决了谬误，因为咱们当初向 Button 组件传递了繁多的子元素。

这种办法只有在增加一个额定的 div 而不会毁坏你的布局时才无效，否则就应用一个片段，因为片段不会向 DOM 增加任何额定的标记。

这是很有必要的，因为 Button 组件应用 React.Children.only 函数来验证 children 属性是否只有一个子元素，并返回它。否则该办法会抛出一个谬误。

React.Children.only办法常常被用于第三方库，以确保 API 的消费者在应用该组件时只提供一个子元素。