Question

我对React还是很陌生，所以如果我的问题很愚蠢，我感到非常抱歉，但是我被困在这里。我正在尝试将数据从父组件发送到子组件

父母：

export default function Dashboard() {

const [msg, setMSG] = useState<string>("Hello!");

  return (

    <Table message={msg}/>
  );

}

孩子：

export default function Orders(message: string) {
  const classes = useStyles();
  return (
    <React.Fragment>
{message}
</React.Fragment>
  );
}

我收到一个错误：

输入'{message：string; }”不可分配给“字符串”类型。

Answer 1

您似乎遇到类型不匹配的问题-这意味着传递给您的子组件的是object

Type '{ message: string; }'

而您的子组件已通过执行以下操作将其输入指定为单个string-Orders(message: string)

尝试以下操作，该操作会保留类型检查：

 // now `props` is of type object, 
 // with a `key` called `message`, the value of which is of type `string`
 export default function Orders(props: {message: string}) {
  const classes = useStyles();
  return (
    <React.Fragment>
      {props.message}
    </React.Fragment>
  );
}

Answer 2

如果您尝试将其作为道具传递，则有两个选择，您可以从道具中分解消息，或使用props.message。我将向您展示变形的方式：

 export default function Orders({message: string}) {
  const classes = useStyles();
  return (
    <React.Fragment>
      {message}
    </React.Fragment>
  );
}

希望这会有所帮助

无法将数据传递给子反应组件

2 个答案: