1、ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the 18.。。。。。
问题原因就是React最新环境是18 而代码使用的写法不是18版本的写法
//17及以前版本支持的写法:
import ReactDOM from "react-dom";
ReactDOM.render(<Index/>,document.getElementById("root"));
//React 18版本支持的写法
import {createRoot} from "react-dom/client";
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<Index/>);
2、warning:Each child in a list should have a unique “key” prop.
在做集合遍历的时候没有给标签或组件加上key的属性,因为dom需要diff比较
import React from "react";
import {createRoot} from "react-dom/client";
class Index extends React.Component {
constructor() {
super();
this.state = {
list: [{"trainCount":1,"stationName":"大连站"},
{"trainCount":2,"stationName":"大连西"},
{"trainCount":3,"stationName":"大连北"},
{"trainCount":4,"stationName":"金州"},
{"trainCount":5,"stationName":"普兰店"}]
}
}
render() {
let totalList = this.state.list;
return (
<div>
{
totalList.map((i)=>{
return <p key={i.trainCount}>{i.stationName}</p>
})
}
</div>
)
}
}
//React 18支持的写法
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<Index/>);
3、Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML
在render渲染的时候,<input>标签 的写法要注意<input type=" "/> 而不是<input></input>
如果这么写<input></input>就会报错。