绑定元素“message”隐式具有“any”类型

绑定元素“message”隐式具有“any”类型

我想将信息从父级传递给子级，但我得到了错误：绑定元素“message”隐式地具有“any”类型。该怎么办？

父组件代码：

const Forms = () => {
    const [messageText, setMessageText] = useState("");
    useEffect(() => {
        API.getPosts()
        const handleMessage = () => {
            setMessageText("lox");
        }
    }, [])
    return (
        <div>
            <div style={{alignItems: "center", justifyContent: "center", textAlign: "center"}}>
                <Form message={messageText}/>
                <Form message={messageText}/>
            </div>
        </div>
    );
};
export default Forms; 

子组件代码：

const Form = ({message}) => {
    return (
        <div>
                <div className={form.form}>
                <h2 className={form.text}>{message}</h2>
                    <p>Автор: <span style={{textDecoration: "underline"}}>Author</span></p>
                </div>
        </div>
    );
};
export default Form; 

要修复此错误，您可以定义消息变量的类型，如下代码所示：

const Form = ({ message }: { message: string }) => {
  return (
    <div>
      <div className={form.form}>
        <h2 className={form.text}>{message}</h2>
        <p>
          Автор: <span style={{ textDecoration: "underline" }}>Author</span>
        </p>
      </div>
    </div>
  );
};
export default Form;

如果您不知道消息变量的类型，可以显式使用any类型，比如：{ message }: { message: any}。然而，如果可能的话，应该避免使用any，因为它会破坏使用TypeScript的好处。