react-table 中的条件单元格渲染
Conditional cell rendering in react-table
我有一列用于切换模式的按钮。问题是,我不想为每一行显示按钮。我只想在颜色的第一个条目上显示按钮。
请注意,颜色是不可预测的(您事先不知道会显示什么颜色)。
例如,
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>)
然而,一切似乎都被冻结了。浏览器甚至没有响应。
关于如何做到这一点有什么好的建议吗?
首先在 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>);
}
使用此示例根据您的目标扩展您的代码。
不要对此使用状态,因为您不想根据新输入重新渲染。相反,计算数组作为渲染的一部分。
例如,假设当您到达渲染语句时,您有一个随机的颜色数组,如下所示:
['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 并让它以您想要的方式显示。
我有一列用于切换模式的按钮。问题是,我不想为每一行显示按钮。我只想在颜色的第一个条目上显示按钮。 请注意,颜色是不可预测的(您事先不知道会显示什么颜色)。
例如,
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>)
然而,一切似乎都被冻结了。浏览器甚至没有响应。 关于如何做到这一点有什么好的建议吗?
首先在 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>);
}
使用此示例根据您的目标扩展您的代码。
不要对此使用状态,因为您不想根据新输入重新渲染。相反,计算数组作为渲染的一部分。
例如,假设当您到达渲染语句时,您有一个随机的颜色数组,如下所示:
['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 并让它以您想要的方式显示。