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;