Question

因此，我从数据库中获取了具有行和数据的动态渲染表。表格中的每一行都有特殊的按钮“ ShowOptions”。如果单击该按钮，则我想在该td元素中呈现组件OptionsMenu。但是我无法理解逻辑该怎么做？

OptionsMenu组件对于每个表行都是相同的，具有相同的选项，但是作为选项功能上的参数的id不同。如果我需要它，我无法理解如何在特殊位置（特殊行的td）呈现组件。请帮忙！这是代码示例

这是动态地获取表数据。

let tableData = ''

    if (this.state.agents) {
      tableData = this.state.agents.map(agent => (
        <tr key={agent.id}>
          <td>
            <UserAvatar size='26' url={agent.avatar} />
          </td>
          <td>
            {agent.lastName + ' ' + agent.name + ' ' + agent.middleName}
            <br />
            <span className='OnlineRowCounter'>Последняя активность: 1</span>
          </td>
          <td>{agent.role}</td>
          <td>1</td>
          <td>1</td>
          <td>{agent.phone}</td>
          <td>{agent.manager}</td>
          <td>
            <div className='OptionsButton-Container'>
              <IconicButton type='options' clicked icon='list-ul' />
              {/* //Here i want to render component below. If i leave as it is, every row will have this component. Ofcourse i can hide it and show in special row i guess, but is it will be the right solution? */}
              <OptionsMenu options={tableRowOptions}/> 

            </div>
          </td>
        </tr>
      ))
    }

Answer 1

1。在状态下创建一个空数组。 2.然后单击将所选项目推入数组 3.在显示选项onclick中，添加您想要的代理的详细信息 4.根据条件对此进行渲染。 State.array.includes（AgentName）。 5.使用片段渲染td。

单击显示选项按钮时，如何在特殊表行中呈现组件（选项菜单）

1 个答案: