Реагируйте: onClick не рендеринг на div

Question

ОБНОВЛЕНИЕ: Оказывается, все работало нормально. У меня только что была ошибка в моем ternary className, которая заставляла класс не применяться. Однако кто-то может объяснить, почему onClick не отображается на <div> в инспекторе?

У меня есть компонент реагирования, в котором я хотел бы визуализировать <div> с событием onClick. Однако 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>
    )
}

Обновление

Кроме того, причина, по которой вы не видите атрибут onClick в отображаемом HTML (т. Е. Как это видно в dev-tools), заключается в том, что отображаемый HTML, который показывает dev-tools, не является фактическим JSX, который вы используете. определено в методах render() вашего компонента.

JSX, который вы определяете, фактически транслируется в javascript за кулисами, и в результате обработчик onClick присоединяется к соответствующему объекту Node javascript для этого <div /> (это внутренне выполняется через addEventListener()) , Это делает рендеринг обработчика onClick в разметку HTML избыточным.

Надеюсь, это поможет!