ReactJS如何从父组件传递子组件标题

Question

我使用了一个光滑的旋转木马组件来显示不同页面的产品，所以我需要从父组件设置它的标题：类似于<Component title="Products" />

以下是我的jsx文件的基本结构，我们可以用下面这样的简单方法吗？

Parent.jsx:

const Parent = () => {
return (
<Component title="Products" />
);
}
export default Parent;

组件.jsx:

const Component = () => {
return (
<h3>
{title}
</h3>
);
}
export default Component;

Answer 1

您可以通过以下道具将数据从父组件传递给子组件：

const Parent = () => {
return (
<Component title="Products" />
);
}
export default Parent;

组件.jsx:

const Component = ( props ) => {
return (
<h3>
{props.title}
</h3>
);
}
export default Component;

Answer 2

您需要访问类似的title参数

非结构化参数

const Component = ({title}) => {
return (
<h3>
{title}
</h3>
);
}
export default Component;

或者像这个

props参数

const Component = (props) => {
return (
<h3>
{props.title}
</h3>
);
}
export default Component;