总览
当咱们把多个子元素传递给一个只冀望有一个 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 的消费者在应用该组件时只提供一个子元素。