在 React 组件中使用常量答案

【问题标题】：Using constants in React Components在 React 组件中使用常量
【发布时间】：2019-08-02 09:24:48
【问题描述】：

单击列表项时，我正在尝试打印一些内容以进行控制台。但是列表被定义为使用它的组件之外的常量。显然这里的 onclick/logItem 不起作用。你会怎么做呢？

奇怪的是，它会在组件挂载时将每个列表项记录到控制台。

我的代码：

import React, { Component } from 'react';

const LIST_ITEMS = require('./ListItems.json');

const myList = 
  LIST_ITEMS.data.Items.map((Item) => (
    <li key={Item.id} onClick={logItem(Item.name)}>
      {Item.name.toUpperCase()}
    </li>
  ))
;

function logItem(name){
  console.log(name);
}

class ItemList extends Component {

  render() {
    return (
      <div id="item-list-wrapper">
        <h3>Select an Item</h3>
                <ul id="item-list">{myList}</ul>
      </div>
    );
  }
}

export default ItemList;

【问题讨论】：

标签： reactjs react-component

【解决方案1】：

你必须将一个函数传递给onClick，而不是调用logItem的结果：

onClick={() => logItem(Item.name)}

【讨论】：