Question

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

我试过给孩子一个className为Parent。因此，单击父级将选择所有同名的类。我在React中读到你不应该在DOM中进行更改。好像它已经不够硬了！

这是我的桌子。（虽然在那里，我在每个父母身上渲染一个新的tbody，因为React哭泣要求返回正确的反应元素..我真的希望它只是所有的，如果可能的话）

    render() {
        return (
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>value</th>
                </tr>
                </thead>
                {this.props.data.items.map(function (parent) {
                    return (
                        <tbody>
                        <tr>
                            <td >{parent.name}</td>
                        </tr>
                        {parent.children.map(function (child) {
                            return (
                                <tr>
                                    <td>{child.name}</td>
                                    <td>{child.value}</td>
                                </tr>
                            )
                        })}
                        </tbody>
                    )
                })}
            </table>
        )
    }
}

数据看起来像这样

[{
  "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},
  ]
}
]

Answer 1

您需要父td <td><button value={parent.name} onClick={this.handleClick}>{parent.name}</button></td>

上的onClick事件处理程序

然后，您需要在组件中使用handleClick方法来触发redux操作并更新状态。您需要在数据结构中使用新属性来存储父项是打开还是关闭。类似于[{"name": "Food", "children": [...], "open": true}]。

现在您可以检查父级中的属性，并仅显示基于bool的子级 {parent.open ? parent.children.map(...) : ''}

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

 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>
        )
    }

React - 表onClick崩溃

1 个答案: