1 通过children 传递domchildren
属性将子元素直接传递到输出。
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
<FancyBorder>
JSX 标签内的任何内容都将通过 children
属性传入 FancyBorder
。由于 FancyBorder
在一个 <div>
内渲染了 {props.children}
,所以被传递的所有元素都会出现在最终输出中。
虽然不太常见,但有时你可能需要在组件中有多个入口,这种情况下你可以使用自己约定的属性而不是 children
:
代码段赋值给变量属性
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
类似 <Contacts />
和 <Chat />
这样的 React 元素都是对象,所以你可以像任何其他元素一样传递它们。
不建议使用继承