Javascript 财产';道具';不存在于类型IntrinsicattAttributes&;上;字符串[]
我不确定我为什么会出错:Javascript 财产';道具';不存在于类型IntrinsicattAttributes&;上;字符串[],javascript,reactjs,typescript,Javascript,Reactjs,Typescript,我不确定我为什么会出错: 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 'IntrinsicAttr
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
代码:
函数应用程序(){
const[ChatHistory,setChatHistory]=useState([])
useffect(()=>{
连接((消息:字符串)=>{
console.log(“新消息”)
setChatHistory([…ChatHistory,msg])
})
console.log(聊天历史记录)
return()=>{}
}, [])
返回(
sendMsg(“你好”)}>
你好
);
}
及
const Chat=(道具:string[])=>{
const msgs=props.map((msg:any,idx:any)=>(
{msg}
))
返回(
聊天记录
{msgs}
)
}
您的行
将类型{props:string[]}
作为第一个参数(名为props
)传递到Chat
组件中,但Chat
希望它是string[]
,(fromconst Chat=(props:string[])=>{/code>)
相反,您可以更改聊天道具的预期类型:
const Chat=(props:{props:string[]})
现在,这不是一种好的样式,因为名称props
应该只用于指定该对象中的所有属性。
因此,您可以重命名传递给Chat的ChatHistory
道具:
render(){
// ...
}
// ...
const Chat=(道具:{chatHistory:string[]}){
props.chatHistory.map(//。。。
}
function App() {
const [ChatHistory, setChatHistory] = useState<string[]>([])
useEffect(() => {
connect((msg: string) => {
console.log("New Message")
setChatHistory([...ChatHistory, msg])
})
console.log(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>
)
}