react-table 中的条件单元格渲染

Question

我有一列用于切换模式的按钮。问题是，我不想为每一行显示按钮。我只想在颜色的第一个条目上显示按钮。请注意，颜色是不可预测的（您事先不知道会显示什么颜色）。

例如，

color toggler
black    +
red      +
red          //don't display it here
yellow   +
blue     +
blue        //don't display it here
blue        //don't display it here
orange   +
red      +
black    +
black       //don't display it here
blue     +

我已尝试查看文档和一些示例，但似乎找不到解决方案（也许是我遗漏了什么？）。

我所做的是将第一种颜色存储在状态中。然后我用 theCheckFunc:

let flag = true 
if (nextColor !== this.state.color)
 this.setState({color: nextColor})
 flag = false
return flag

然后在我做的专栏中。

Cell: props => (this.theCheckFunc(props) && <div onClick={somefunc}> + <div>)

然而，一切似乎都被冻结了。浏览器甚至没有响应。关于如何做到这一点有什么好的建议吗？

Answer 1

首先在 state 或 class 中任意设置颜色控制变量。在这个例子中，我选择通过状态来控制它们。

constructor(props) {
        super(props);

            this.state = {
                firstRedAlreadyHere: false,
                firstBlueAlreadyHere: false,
                firstGrayAlreadyHere:false,
                ....
                ...
            }
}

然后开一个函数准备一个table。稍后在 render() 中使用该函数将 table 放在组件上。

function putValuesToTable()
{

    let table = [];

        for (let i = 0; i < (YOUR_LENGTH); i++) {
            {
                let children = [];   /* SUB CELLS */

                /* IF RED COLOR IS NEVER CAME BEFORE, PUT A BUTTON NEAR IT */
                if(!this.state.firstRedAlreadyHere)
                children.push(<td>
                   <SomeHtmlItem></SomeHtmlItem></td> <td><button </button></td>)
                /* ELSE DON'T PUT BUTTON AND CHANGE STATE. */
                else
                {
                  children.push(<SomeHtmlItem></SomeHtmlItem>);
                  this.state.firstRedAlreadyHere = true;
                }
                table.push(<tr>{children}</tr>);
            }
        }
return table;
}

我是直接改变状态而不是this.setState()；因为我不想触发刷新:)。在渲染函数中，像这样调用 putValuesToTable

render()
{
return (<div>
<table>
         <tbody>
         <tr>
         <th>SomeParameter</th>
         <th>SomeParameter2</th>         
         </tr>
             {this.putValuesToTable}
         </tbody>
         </table>
</div>);
}

使用此示例根据您的目标扩展您的代码。

Answer 2

不要对此使用状态，因为您不想根据新输入重新渲染。相反，计算数组作为渲染的一部分。

例如，假设当您到达渲染语句时，您有一个随机的颜色数组，如下所示：

['red', 'red', 'black', 'purple', 'purple']

然后这个函数可以用渲染数据创建你需要的数组：

function getTableRowData(arr) {
  let tableRowData = []
  arr.forEach((color, n) => {
    let toggler = true
    if (n !== 0 && arr[n - 1] === color) {
      toggler = false
    }
    tableRowData.push({ color, toggler, })
  })
  return tableRowData
}

然后您可以在渲染中遍历 tableRowData return 并让它以您想要的方式显示。

react-table 中的条件单元格渲染

Conditional cell rendering in react-table

javascript

reactjs

web

react-table