React js 將道具傳遞給組件

Question

您好，基本上我需要將一些數據傳遞給組件才能流行該組件：

const Data = {
  name: "a",
  title: "b"
};
export default function App() {
  return (
    <Div className="App">
      <Card name={Data.name} title={Data.title} />
    </Div>
  );
}

我的卡組件我需要接收數據的組件：

const Card = ({ props }) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.title}</p>
    </div>
  );
};

export default Card;

出於某種原因，我的卡片組件上沒有這些道具

有人可以幫我解決將道具從功能組件移動到功能組件的解決方案嗎

例子：

https://codesandbox.io/s/friendly-swanson-syuln

Answer 1

您的組件聲明是錯誤的。 你應該只使用括號來解構 props，而不是整個 props 對象。

const Card = (props) => {

Answer 2

去掉cards.js中props周圍的花括號

import React from "react";

const Card = ( props ) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.title}</p>
    </div>
  );
};

export default Card;