React问题记录

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>就会报错。