反應：onClick不在div上渲染

Question

更新：事實證明一切正常。 我的className三元組中只有一個錯誤，導致該類不適用。 但是，有人可以解釋為什么onClick不會出現在檢查器的<div>上嗎？

我有一個react組件，我想在其中使用onClick事件呈現<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使用唯一的逐項關鍵道具正確地解析/確定如何在渲染周期內更新列表中渲染的項目（即通過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不是您在組件的render()定義的實際JSX。 render()方法。

您定義的JSX實際上是在幕后翻譯成javascript的，因此， onClick處理程序將附加到該<div />的相應javascript Node對象上（這是通過addEventListener()在內部完成的）。 因此，這使得將onClick處理程序呈現到HTML標記中變得多余。

希望有幫助！