Question

我正在创建一个可折叠表，当用户单击一行时，将通过api调用获取详细信息，并且该详细信息必须显示为该行下方的新表（例如手风琴）。再次单击将关闭打开的行，并且每行都会发生一次（按要求提供数据）。谁能建议我使用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）以从服务器获取数据。此外，该操作还应切换打开状态。
创建一个化简器，将获取的结果存储为您的状态
在toggleDetail()中呼叫您的新操作
使用mapStateToProps将状态映射到道具。使用打开状态来确定是否应使该行处于打开还是关闭状态。

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

除了每行两个状态（打开/关闭），您还可以引入第三个状态loading，以向用户指示当前正在从服务器中获取数据。

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

1 个答案: