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;