Question

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

2020-06-19

76

reactjs react-hooks

我对 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>
  );
}

我收到错误：

Type '{ message: string; }' is not assignable to type 'string'.

Answer 1

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

Type '{ message: 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

如果您尝试将其作为 prop 传递下去，您有两个选择，您可以从 props 中解构消息，或者使用 props.message。我将向您展示解构方式：

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

希望这有帮助