反应：onClick 不在 div 上呈现

Question

更新：结果一切正常。我的 className 三元组中出现了一个错误，导致该类不适用。但是，有人可以解释为什么 onClick 没有出现在检查器中的<div> 上吗？

我有一个反应组件，我想在其中渲染一个带有onClickevent 的<div>。但是，由于某种原因，onClick 没有呈现。除了警告之外，我在控制台中没有任何错误：Each child in an array or iterator should have a unique "key" prop.

实际渲染的<div> 如下所示：<div id="1" class="unselected">Peppered Chicken</div>

我的代码如下所示。想法？

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')),
    )
});

Answer 1

这种问题可能是由于key 属性未在列表项上呈现（即，如警告所示）。 key 在这里很重要的原因是 React 使用唯一的 per-item key prop 来正确解析/确定如何在渲染周期中更新列表中渲染的项目（即通过map()）。

合并key 属性的一种简单方法是使用从地图回调传入的唯一“索引”，如下所示：

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>
    )
}

更新

此外，您在呈现的 HTML 中看不到 onClick 属性（即可以在 dev-tools 中看到）的原因是因为 dev-tools 显示的呈现 HTML 不是您实际显示的 JSX在组件的 render() 方法中定义。

您定义的 JSX 实际上在幕后转换为 javascript，因此，onClick 处理程序会附加到该 <div /> 的相应 javascript Node 对象（这是在内部通过 addEventListener() 完成的） .因此，这使得将 onClick 处理程序渲染到 HTML 标记中变得多余。

希望有帮助！