Javascript 反应：onClick不在div上渲染

更新：原来一切都很好。我只是在我的类名中有一个错误，导致该类无法应用。但是，有人能解释一下为什么onClick没有出现在inspector中的

上吗

---

我有一个react组件，我想在其中使用

onClick

事件呈现

。但是，由于某些原因，

onClick

无法渲染。控制台中没有错误，除了警告：

数组或迭代器中的每个子级都应该有一个唯一的“key”属性。

实际呈现的

如下所示：

胡椒鸡

我的代码看起来像这样。想法

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<div><RecipesList/></div>)
    }
}

class RecipesList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            recipes: [{recipes:[]}],
            selectedRecipe: null
        };

        this.setRecipeAsSelected = this.setRecipeAsSelected.bind(this)
    }

    componentDidMount() {
        fetch('/recipes')
            .then(response => response.json())
            .then(recipes => this.setState({recipes}));
    }

    setRecipeAsSelected(recipeID) {
        this.setState({selectedRecipe: recipeID})
    }

    render() {
        return (
            <div>
                {this.state.recipes[0]["recipes"].map((recipe, index) => {
                    return <Recipe setRecipeAsSelected={this.setRecipeAsSelected} selectedRecipe={this.state.selectedRecipe} recipe={recipe} id={index}/>
                })}
                <Generate/>
            </div>
        )
    }
}

class Recipe extends React.Component {
    constructor(props){
        super(props);

        this.setThisAsSelected = this.setThisAsSelected.bind(this)
    }

    setThisAsSelected() {
        this.props.setRecipeAsSelected(this.props.id)
    }

    render() {
        return (
            <div onClick={this.setThisAsSelected} key={this.props.id} id={this.props.id} className={this.props.selectedRecipe === this.props.key ? "bg-primary" : "test"}> {this.props.recipe} </div>
        )
    }
}

class Generate extends React.Component {
    render() {
        return (
            <div>
                <button>GENERATE</button>
            </div>
        )
    }
}

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(
        <App/>,
        document.body.appendChild(document.createElement('div')),
    )
});

从“React”导入React
从“react dom”导入react dom
从“道具类型”导入道具类型
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回（）
}
}
类RecipesList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
配方：[{recipes:[]}]，
selectedRecipe:null
};
this.setRecipeAsSelected=this.setRecipeAsSelected.bind（this）
}
componentDidMount（）{
获取（“/recipes”）
.then（response=>response.json（））
.then（recipes=>this.setState（{recipes}））；
}
setRecipeAsSelected（recipeID）{
this.setState（{selectedRecipe:recipeID}）
}
render（）{
返回(
{this.state.recipes[0][“recipes”].map（（recipe，index）=>{
返回
})}
)
}
}
类Recipe扩展了React.Component{
建造师（道具）{
超级（道具）；
this.setThisAsSelected=this.setThisAsSelected.bind（this）
}
setThisAsSelected（）{
this.props.setRecipeAssected（this.props.id）
}
render（）{
返回(
{this.props.recipe}
)
}
}
类生成扩展的React.Component{
render（）{
返回(
生成
)
}
}
document.addEventListener（'DOMContentLoaded'，（）=>{
ReactDOM.render(
,
document.body.appendChild（document.createElement（'div'）），
)
});
此类问题可能是由于列表项上未呈现
键
道具（如警告所示）造成的。
key
在这里很重要的原因是React使用唯一的每项key prop来正确解析/确定如何在渲染周期内更新列表中渲染的项（即通过
map（）
）

合并
键
属性的一个简单方法是使用从映射回调传入的唯一“索引”，如下所示：

render() {
    return (
        <div>
            {this.state.recipes[0]["recipes"].map((recipe, index) => {
                return <Recipe 
                        setRecipeAsSelected={this.setRecipeAsSelected}
                        selectedRecipe={this.state.selectedRecipe} 
                        recipe={recipe} id={index} key={index }/> 
            })}
            <Generate/>
        </div>
    )
}

render（）{
返回(
{this.state.recipes[0][“recipes”].map（（recipe，index）=>{
返回
})}
)
}

更新
另外，在呈现的HTML中看不到
onClick
属性的原因（即可以在开发工具中看到），是因为开发工具显示的呈现HTML不是您在组件的
render（）
方法中定义的实际JSX

您定义的JSX实际上在幕后被转换为javascript，因此，
onClick
处理程序被附加到该
对应的javascript节点对象（这在内部通过
addEventListener（）
完成）。因此，将
onClick
处理程序呈现到HTML标记中是多余的

希望有帮助
 
数组或迭代器中的每个子级都应该有一个唯一的“键”属性
若要解决此问题，请在映射到
组件时，在您的
RecipleList
的渲染方法中添加键。例如，
来自哪里？代码中没有。我想应该是“测试”。为了清晰起见，我更改了它，但忘记在更新中的elementResolution上更新它above@JonnyB刚刚更新了答案，根据要求添加了详细信息：-）谢谢。在解决这个问题的时候，我意识到我在设置类名时把三元组搞砸了。我最初试图将这个key={index}作为一个道具传递，给每个道具一个唯一的键，并在类名三元中使用。但是，我遇到了一个错误，因为你不能将key=作为道具传递，所以我只是删除了这个道具并使用了id。直到你的建议，我才意识到为什么会出现这个错误。创建道具和设置关键点的语法是相同的。尝试使用key=作为道具时，只需将键值设置为on。从中删除key=后，我没有将类名从this.props.key更改为this.props.id。谢谢你的帮助。@JonnyB谢谢你-很高兴听到它起作用了！你知道为什么onClick没有出现在inspector中吗？你使用的是元素选项卡，对吗？它根本不在那里的分区上。