如何使用 react + redux 在单击的行旁边添加动态行？

Question

我正在创建一个可折叠的 table，当用户单击一行时，会通过 api 调用获取详细信息，并且必须将详细信息显示为新的 table 在该行下方（如手风琴）。再次单击关闭打开的行，每一行都会发生这种情况（根据请求提供数据）。谁能建议我用 React + Redux

实现这一目标的方法

<tbody>
                {projectslist.map( i =>
                   [<tr key={Math.random()} id={'row_'+i.id} onClick={toggleDetail(i.id)}>
                        <td key={Math.random()} md={1} xs={1}>{i.name}</td>
                        <td className="totalCol" key={Math.random()} md={1} xs={1}>{i.value}</td>

                        {months.map(m => 
                            weeks.map(w => 
                                w == 1 ? [ <td colSpan="2">1/2</td>, <td key={Math.random()}>{calculateCells(w, m.format("M"), recordslist[i.name])}</td>]
                                : <td key={Math.random()}>{calculateCells(w, m.format("M"), recordslist[i.name])}</td>
                            )
                        )}
                   </tr>,
                   <tr id={'child_'+i.id} ref={'child_'+i.id} style={{display:'none'}}>Test

                   </tr>]
                )}
            </tbody>

Answer 1

您想在状态中存储两件事：开关的状态和从服务器获取的数据。
创建一个操作 (async action) 以从服务器获取数据。此外，动作应切换打开状态。
创建一个 reducer，用于存储您所在州的提取结果
在 toggleDetail() 中调用您的新操作
使用 mapStateToProps 将状态映射到您的道具。使用打开状态来确定是否应该呈现行打开或关闭。

由于您想实现手风琴并且可以一次打开多行我建议您的状态使用以下数据结构：（假设数据是从服务器获取的数据）：state.projects[data.id] = data.

除了每行有两种状态 (open/closed)，您还可以引入第三种状态 loading 以向用户指示当前正在从服务器获取数据。

如何使用 react + redux 在单击的行旁边添加动态行？

How to add dynamic row next to the clicked row with react + redux?

accordion

reactjs

redux