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

Question

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

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

父母.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

您需要像这样访问标题参数

解构参数

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

export default Component;

或者像这样

props参数

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

export default Component;