React 中的 props 和 children
-
React 中的
props.children
是什么 -
在 React JSX 中传递
props.children
-
在 React 中使用
children
属性传递孩子 -
在 React 中使用
React.createElement()
传递子节点
本文将探讨 props.children
是什么以及为什么它对自定义组件有用。
React 中的 props.children
是什么
与任何其他基于组件的库一样,React 促进了代码的可重用性。首先,这是通过重用组件来实现的,但还有更多。
由于框架遵循声明式方法,因此很容易包含组件并嵌套它们。
React 提供了构建通用组件并使用组合模型自定义它们所需的工具和框架。
要使用组合模型自定义组件,你必须访问 props
对象的 children
属性。默认情况下,每个组件都具有此属性。
简单来说,子组件的 props.children
可用于在调用该子组件时访问开始和结束标记之间的嵌套值。让我们看一个简单的例子。
export default function App() {
return (
<div className="App">
<Child>
<h1>Hello, world</h1>
</Child>
</div>
);
}
function Child(props) {
return <div>{props.children}</div>;
}
在这个例子中,看起来我们直接在 App
组件中显示内容,但我们在 <Child>
组件的开始标签和结束标签之间传递内容作为 props
。稍后我们在 Child
组件中引用 <h1>
元素。
你可以在 CodeSandbox 上查看实时代码示例。
请注意,你必须调用带有开始和结束标签的组件才能使 props.children
功能正常工作。
在某些情况下,React 开发人员会编写自闭合标签:<Child />
。这与需要打开和关闭标签才能工作的 props.children
不兼容。
在 React JSX 中传递 props.children
当你需要动态生成内容并将其传递给子组件时,React 的此功能特别有用,子组件可能只是一个样式化的容器。这个用例的一个很好的例子是任何信使应用程序中的消息框。
在示例中,我们通过 props
从父组件向子组件传递了一个 <h1>
元素。你想要传递给子组件的内容量不受限制。
你在子组件的打开和关闭 JSX 标记之间放置的任何内容都可以通过 props.children
在子组件中呈现。
如果你有很多内容要作为 children
传递,你可能需要将它们传递到子组件中的多个孔中。React 让开发人员可以自由地在子组件上创建自定义 prop 属性。
让我们看一个例子。
export default function App() {
return (
<div className="App">
<Child
greeting={<h1>Hello, world</h1>}
goodbye={<h1>Goodbye, world</h1>}
>
</Child>
</div>
);
}
function Child(props) {
return <div>
<div className="top">{props.greeting}</div>
<div className="bottom">{props.goodbye}</div>
</div>;
}
在这种情况下,我们不是在开始标签和结束标签之间传递 <h1>
元素,而是创建自定义属性 greeting
和 goodbye
并将元素作为 props 传递。
在 Child
组件中,我们有两个单独的 <div>
元素,它们显示来自每个属性的值。
这个例子的关键点是你可以传递 HTML 元素,如 <h1>
作为 props,以及自定义组件。例如,Vue 有一个类似的概念,叫做 slots
。
然而,在 React 中,你并不局限于可以作为 props 传递的值。
在 React 中使用 children
属性传递孩子
在 React 中传递 children
值的最常见方法是将它们放在组件的开始标签和结束标签之间。或者,你可以在组件上使用 children
值并设置其值。
在 React 中使用 React.createElement()
传递子节点
JSX 允许我们以声明方式定义和调用 React 组件,但所有 JSX 代码最终都编译为 React.createElement()
调用。
如果你不使用 JSX 来开发你的 web 应用,你可以直接使用 React.createElement()
方法。前两个参数是 type
和 props
。
之后,任何后续参数都将作为子元素传递给创建的元素,并且可以通过访问 props.children
值来引用。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn