Я не уверен, почему я получаю сообщение об ошибке:
TypeScript error in /home/amanuel2/tutorial/go/react-go/src/frontend/src/App.tsx(34,15):
Type '{ props: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'.
Property 'props' does not exist on type 'IntrinsicAttributes & string[]'. TS2322
Код:
function App() {
const [ChatHistory, setChatHistory] = useState<string[]>([])
useEffect(() => {
connect((msg: string) => {
console.info("New Message")
setChatHistory([...ChatHistory, msg])
})
console.info(ChatHistory)
return () => { }
}, [])
return (
<div className = "App">
<Header />
<header className = "App-header">
<Chat props = { ChatHistory }/>
<button type = "submit" onClick = {()=>sendMsg("Hello")}>
Hello
</button>
</header>
</div>
);
}
И
const Chat = (props: string[]) => {
const msgs = props.map((msg:any, idx:any) => (
<p key = { idx }>
{ msg }
</p>
))
return (
<div className = "ChatHistory">
<h3> Chat History </h3>
{ msgs }
</div>
)
}
Ваша строка <Chat props = { ChatHistory }/>
передает тип { props: string[] }
в качестве первого аргумента (тот, который называется props
) в компонент Chat
, но Chat
ожидает, что это будет string[]
(из const Chat = (props: string[]) => {
).
Вместо этого вы можете изменить ожидаемый тип реквизита чата:
const Chat = (props: {props: string[]})
Это нехороший стиль, так как имя props
следует использовать только для указания всех атрибутов в этом объекте.
Итак, вместо этого вы можете переименовать свойство ChatHistory
, которое передается в чат:
render() {
// ...
<Chat chatHistory = {ChatHistory}/>
}
// ...
const Chat = (props: {chatHistory: string[]}) {
props.chatHistory.map( // ...
}