用打字稿反应路由器如何导入内在属性
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>
);
}
第一次使用 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>
);
}