Javascript ReactJS错误：确保放弃与组件相同的道具'；s的构造函数已通过

我正在学习“clear”ReactJS（即，它不是JSX）。这是我的简单代码：

(() => {
    class List extends React.Component{
        constructor({tag, attributes, items}){
            super({tag, attributes, items})
            this.tag = tag
            this.attributes = attributes
            this.items = items
        }
        render(){
            return React.createElement(this.props.tag, this.props.attributes, items.map(
                (n, i) => new React.createElement(ListItem, 
                    { attributes: { ...n.attributes, key: i }, value: n.value })))
        }
    }

    class ListItem extends React.Component{
        constructor({attributes, value}){
            super({attributes, value})
            this.attributes = attributes
            this.value = value
        }
        render(){
            return React.createElement("li", this.props.attributes, this.props.value)
        }
    }

    const items = [
        { attributes: null, value: "A" },
        { attributes: null, value: "B" },
        { attributes: null, value: "C" },
        { attributes: null, value: "D" },
        { attributes: null, value: "E" }
    ]

    const root = document.getElementById("root")

    ReactDOM.render(new React.createElement(List, { tag: "ul", attributes: null, items }), root)
})()

请注意：我在

super

中输入的参数与在组件构造函数中获得的参数相同。对于

li

元素，我也使用

key

。但我有这样的错误：

警告：列表（…）：在

列表中调用super（）时，请确保通过
使用组件构造函数传递的相同道具

警告：数组或迭代器中的每个子级都应具有唯一的“键”
道具

检查
列表的渲染方法

在列表项中（由列表创建）

列表中

警告：ListItem（…）：在
ListItem
中调用super（）时，请确保
放弃与组件构造函数相同的道具
通过。警告：ListItem（…）：在
ListItem
中调用super（）时，
确保传递与组件的构造函数相同的道具
通过了。警告：ListItem（…）：在中调用super（）时
ListItem
，确保放弃组件的相同道具
构造函数已通过。警告：ListItem（…）：调用super（）时
在
列表项中
，确保放弃与您的
已传递组件的构造函数。警告：ListItem（…）：当
在
ListItem
中调用super（），确保放弃相同的道具
组件的构造函数已通过

我做错了什么？
您需要使用单个变量，例如
props
作为
构造函数的参数。然后将其传递给
super
。下面的代码修复了所有警告


类列表扩展了React.Component{
建造师（道具）{
超级（道具）；
this.tag=props.tag；
this.attributes=props.attributes；
this.items=props.items；
}
render（）{
返回React.createElement(
这个.props.tag，
这个.props.attributes，
items.map(
（n，i）=>
新建React.createElement（ListItem{
属性：{…n.attributes，key:i}，
价值
})
)
);
}
}
类ListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.attributes=props.attributes；
this.value=props.value；
}
render（）{
返回React.createElement（“li”，this.props.attributes，this.props.value）；
}
}
常数项=[
{attributes:null，值：“A”}，
{attributes:null，值：“B”}，
{attributes:null，值：“C”}，
{attributes:null，值：“D”}，
{attributes:null，值：“E”}
];
const root=document.getElementById（“根”）；
ReactDOM.render(
新建React.createElement（列表，{tag:“ul”，属性：null，items}），
根
);
您可以在渲染方法内部使用分解结构

class List extends React.Component{
    constructor(props){
        super(props).....

    render(){
        const {tag, attributes, items} = this.props
        return React.....