React父子组件传参报错：Binding element 'message'隐式具有'any'类型

这个错误是因为TypeScript无法推断子组件Form接收的message属性类型，默认视为any，而TypeScript严格模式下禁止隐式any类型。以下是几种修复方案：

方案一：定义Props接口（推荐） #

通过接口明确组件接收的props类型，代码更易维护和扩展：

import React from 'react';
// 替换为你的样式模块路径
import form from './Form.module.css';

// 定义Form组件的props类型接口
interface FormProps {
  message: string;
}

const Form = ({ message }: FormProps) => {
  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;

方案二：直接在参数中指定类型 #

如果不需要复用props类型，可以直接在解构参数时声明类型：

import React from 'react';
import form from './Form.module.css';

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;

方案三：使用React.FC类型 #

通过React.FC包裹组件并传入props类型：

import React from 'react';
import form from './Form.module.css';

interface FormProps {
  message: string;
}

const Form: React.FC<FormProps> = ({ 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;

额外提示 #

父组件useEffect中存在两处小问题，虽不影响当前错误，但建议修正：

1. API.getPosts()如果是异步函数，需用async/await处理
2. handleMessage函数定义后未调用，无法触发setMessageText

修正后的父组件useEffect示例：

useEffect(() => {
  const fetchPostsAndSetMessage = async () => {
    await API.getPosts();
    setMessageText("lox");
  };
  fetchPostsAndSetMessage();
}, [])

内容的提问来源于stack exchange，提问作者therepanic