Question

我的州里有几个清单。这样：

this.state = {
    [
        list1: [
                item1: value1,
                item2: value2,
            ]
        list2: [
                item1: value1,
                item2: value2,
            ]
    ]
}

我正在尝试创建一个可重复使用的无状态功能组件，它将使用删除按钮创建列表项，并迭代列表，或根据我使用map函数循环的信息迭代键，这样： / p>

this.state.list1.map(item => <Component props={item} method={removeItem} />)

将输出如下所示的列表项：

<li> value1 <button onClick={removeitem} ref={item1} >Click to remove</button></li>
<li> value2 <button onClick={removeitem} ref={item2} >Click to remove</button></li>

所以我的问题如下：

我是否需要将键放在我将用于生成最终输出的父级方法的组件中以及子级中？无国籍职能部门的孩子会接受参考吗？如果没有，我如何在onClick函数中引用正确的数据，以便它被删除？

Answer 1

无状态功能组件没有后备实例，因此无法ref。

您可以将项目的index传递给组件：

this.state.list1.map((item, index) => <Component props={item} method={() => { this.removeItem(index); }} />)

活动＆amp;参考从地图

1 个答案: