Событие onClick не будет работать в моем коде React

Question

У меня есть событие onClick внутри render (), которое не будет работать, я пробовал (явно не) все.

Что я делаю не так?

render() {

const Card = ({backgroundColor, id, state}) =>{  
    const style = {
        width: '100px',
        height:'100px',
        backgroundColor: backgroundColor,
        key: id,
        state: state,
    }
    return <div style={style} />
}

const finalCards = this.state.cards.map((n) =>(
  <Card backgroundColor={n.hiddenColor} key={n.id} state={n.state} onClick={() => alert('clicked')} />
));

return (
  <div className="App">
      {finalCards}
  </div>
);

}}

Answer 1

Так как Card является отдельным компонентом, вы должны держать его объявленным вне метода рендеринга.

Но проблема в том, что вы передаете функцию onClick компоненту, но это не так.подключение этой функции onClick к элементу HTML (в данном случае <div />).

Это должно работать

const Card = ({backgroundColor, id, state, onClick}) =>{  
    const style = {
        width: '100px',
        height:'100px',
        backgroundColor: backgroundColor,
        key: id,
        state: state,
    }
    return <div style={style} onClick={onClick} />
}