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

不要与此一起使用状态，因为您不想基于新输入重新渲染。而是将数组计算为渲染的一部分。

例如，假设进入渲染语句时，您将拥有一个随机的颜色数组，如下所示：

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 }

然后此函数可以创建需要的数组以及用于渲染的数据：

{{1}}

然后，您可以遍历渲染返回中的tableRowData并以所需的方式显示它。

Answer 2

首先在您选择的状态或类中设置颜色控制变量。在此示例中，我选择控制它们的状态。

constructor(props) {
        super(props);

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

然后打开一个准备表的函数。稍后在render（）中使用该函数将表放到组件上。

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

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

反应表中的条件单元格渲染

2 个答案: