Javascript 反应-表onClick崩溃

我有父母和孩子的数据，希望将其呈现为一个表。单击父对象时，子对象应折叠

我试着给孩子们一个家长的类名。因此，单击父类将选择同名的所有类。 我在React中读到，您不应该在DOM中进行更改。好像还不够难似的

这是我的桌子。（当我们在做的时候，我为每个家长呈现了一个新的tbody，因为React要求返回正确的React元素。如果可能的话，我真的希望它只是所有的s）

---

在父td

{parent.name}

然后在组件中需要一个handleClick方法来触发redux操作并更新状态。在数据结构中需要一个新属性来存储父级是打开的还是关闭的。类似于

[{“name”：“Food”，“children”：[…]，“open”：true}]

现在，您可以检查父对象中的属性，并且仅显示基于bool的子对象

{parent.open？parent.children.map（…）：''}

最终结果看起来有点像这样

[{
  "name": "Food", "children": [
    {"name": "Apple", "value": 5.6},
    {"name": "Banana", "value": 2.2},
    {"name": "Peer", "value": 1.6},
  ]
},
{
  "name": "Drink", "children": [
    {"name": "Cola", "value": 5.6},
    {"name": "Juice", "value": 2.2},
    {"name": "Water", "value": 1.6},
  ]
}
]

 handleClick(event) {
   this.props.toggleParent(event.target.value);
 }
 render() {
        return (
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>value</th>
                </tr>
                </thead>
                {this.props.data.items.map(function (parent) {
                    return (
                        <tbody>
                        <tr>
                            <td><button value={parent.name} onClick={this.handleClick}>{parent.name}</button></td>
                        </tr>
                        {parent.open ? parent.children.map(function (child) {
                            return (
                                <tr>
                                    <td>{child.name}</td>
                                    <td>{child.value}</td>
                                </tr>
                            )
                        }.bind(this) : ''}
                        </tbody>
                    )
                })}
            </table>
        )
    }

handleClick（事件）{
this.props.toggleParent（event.target.value）；
}
render（）{
返回(
名称
价值
{this.props.data.items.map（函数（父函数））{
返回(
{parent.name}
{parent.open？parent.children.map（函数（子函数））{
返回(
{child.name}
{child.value}
)
}.bind（这个）：“”
)
})}
)
}

谢谢spirift！我喜欢这个答案，但我有一个问题。我在父组件中有这个函数，并将它作为一个道具传递下来。现在单击这个：onClick={（）=>{this.props.handleClick（event）}}。它告诉我这是未定义的。在没有看到代码的情况下很难确定，但我认为你可以使用onClick

onClick={this.props.handleClick}

事件自动作为第一个参数传递。也许您需要匿名箭头函数，但它将被写成：

onClick={（事件）=>this.props.handleClick（事件）}

使用（）=>在父函数中，而不是在子函数中。我在两个映射函数中都使用了箭头函数，或者我需要同时绑定这两个函数，而不仅仅是您使用的1。谢谢！

 handleClick(event) {
   this.props.toggleParent(event.target.value);
 }
 render() {
        return (
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>value</th>
                </tr>
                </thead>
                {this.props.data.items.map(function (parent) {
                    return (
                        <tbody>
                        <tr>
                            <td><button value={parent.name} onClick={this.handleClick}>{parent.name}</button></td>
                        </tr>
                        {parent.open ? parent.children.map(function (child) {
                            return (
                                <tr>
                                    <td>{child.name}</td>
                                    <td>{child.value}</td>
                                </tr>
                            )
                        }.bind(this) : ''}
                        </tbody>
                    )
                })}
            </table>
        )
    }