React Typescript 通过状态

Question

我是 React TypeScript 的新手。我对通过状态有疑问。当我尝试将状态传递给子组件和 conosle.log(state) 时，我可以看到正确的对象。但是，当我尝试执行 console.log(state.name) 时，出现错误。我该如何解决这个问题？

App.tsx

export interface Information {
  name: string;
  age: string;
}

const App: FC = () => {
  const [state, setState] = useState<Information | null>({
    name: "young",
    age: "10",
  });

  return (
    <div className="App">
      <div className="header">
        <div className="inputContainer">
          <input type="text" placeholder="Task.." name="task" />
          <input type="number" placeholder="Deadline" name="deadline" />
        </div>
        <button>Add Task</button>
        <div>
          <MyForm state={state} />
        </div>
      </div>
    </div>
  );
};

子组件

type Props = {
  state: ReactNode;
};

const MyForm: FC<Props> = ({ state }: Props) => {
  console.log(state.name);  // Error
  return <div>Hello, {state}</div>;
};

export default MyForm;

谢谢！

Answer 1

错误是因为您试图读取 JSX

中的 state 对象

  return <div>Hello, {state}</div>

像阅读对象一样阅读它：

  return <div>Hello, {state.name}</div>

同样在您的 MyForm 组件 Props 中，使用您的 Information 接口作为类型定义而不是 ReactNode

export interface Information {
  name: string
  age: string
}

type Props = {
  state: Information
}

React Typescript 通过状态

React Typescript pass state

state

react-typescript