在react.js中使用args向下传递回调组件层次结构

Question

我在我的项目中使用react.js，我有像这样的组件层次结构。

RootComponent
|- Child1
|  |- itemA1
|  |- itemA2
|   - ...
 - Child2
   |- itemB1
   |- itemB2
    _ ...

我拥有RootComponent中的所有状态，即：

• itemA元素数组
• itemB元素数组
• 当前所选项目的索引A
• 当前所选项目B的索引

我想通过点击一个项来更改当前选择的项目，所以我在RootComponent中创建了一个属性：

changeCurrentItemA: function(item) {
    console.log("check, if the function was called");
    //do something with state
}

我将其传递给Child1：

<Child1 items={this.state.data.itemsA} changeCurrentItemA={this.changeCurrentItemA} />

在儿童组合中，我从道具中获取功能：

var changeCurrentItemA = this.props.changeCurrentItemA;

我希望像这样呈现：

<li onClick={changeCurrentItemA(item)} />

此howerver会立即评估该函数，因此在渲染过程中，当我单击它时，它会被评估n次并且没有任何反应。

如何在用户点击后传递给变量item的运行函数做出反应。

我在这里看到了类似的问题：React.js how to pass callbacks to child components? 但那里的功能没有争议。

编辑： 它与bind的问题不重复，因为反应劫持默认bind行为只允许绑定组件。