用打字稿反应路由器如何导入内在属性

React router with typescript how to import intrinsic attributes

第一次使用 Typescript,我在地图内部渲染一个组件,如下所示:

interface chatInterface {
  sender: string;
  avatar: string;
  content: string;
  time: string;
}
<>    
  {eachUser?.chats.map((item) =>
                  item.messages.map((obj: chatInterface, index: number) => {
                    return <ChatPage key={index} message={obj} />;
                  })
                )}
</>

ChatPage 组件是这样的:

function ChatPage(props: { message: chatInterface }) {
  const { sender, avatar, content, time } = props.message;
  return (
      <div>
        <ul>
          <li>
            <strong>{sender}:</strong> {content} at:{time}
          </li>
        </ul>
    </div>
  );
}

它工作正常,但我想为 ChatPage 组件创建一个页面,但我不知道如何将它导入 React 路由器。这是我的 app.tsx 组件:

<Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/chat" element={<ChatPage />} />
        </Routes>
      </Router>

上面写着:

Property 'message' is missing in type '{}' but required in type '{ message: chatInterface; }'

看起来 ChatPage 组件缺少更好的类型声明。错误是说 message 道具是必需的并且丢失了。换句话说,它不是一个可选的道具。

使 message 成为可选的 属性 并处理组件中的解构回退值。

示例:

interface chatPageInterface {
  message?: chatInterface;
}

function ChatPage(props: chatPageInterface) {
  const { sender, avatar, content, time } = props.message || {};
  return (
      <div>
        <ul>
          <li>
            <strong>{sender}:</strong> {content} at:{time}
          </li>
        </ul>
    </div>
  );
}