在 React 组件中使用常量

Question

我正在尝试在单击列表项时打印一些内容以进行控制台。但是列表被定义为使用它的组件之外的常量。显然这里的 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;

Answer 1

您必须将函数传递给 onClick，而不是调用的结果 logItem:

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

在 React 组件中使用常量

Using constants in React Components

reactjs

react-component