React-table 单个单元格样式
Posted
技术标签:
【中文标题】React-table 单个单元格样式【英文标题】:React-table Individual Cell Style 【发布时间】:2019-05-22 04:07:23 【问题描述】:我正在使用 react-table 并希望根据它们内部的数量来更改特定单元格的背景颜色。前任。单元格 > 1 = 绿色,单元格
我知道这段代码不起作用,但希望它能显示出我正在寻找的东西:
<ReactTable
data=data
columns=columns
getTdProps=(cellInfo) =>
return
if (cellInfo.value > 1)
cellInfo.className = "green-cell";
if (cellInfo.value < 1)
cellInfo.className = "red-cell";
;
/>
希望这是有道理的。感谢您的帮助。
【问题讨论】:
【参考方案1】:getTdProps
用于整行。在列定义中使用getProps
。例如:
<ReactTable
data=[
age: 8 ,
age: 11 ,
age: 9 ,
age: 6 ,
age: 12 ,
]
columns=[
Header: 'Age',
accessor: 'age',
getProps: (state, rowInfo, column) =>
return
style:
background: rowInfo && rowInfo.row.age > 10 ? 'red' : null,
,
;
,
]
/>
【讨论】:
是否也可以编辑Header
样式?还是我们需要在 Header
键中返回 JSX?
有@JohhanSantana - 在访问者下添加headerStyle
财产权。它的工作方式与 style
对 react 组件的工作方式相同。
这不再适用于 v7。 v7 的任何解决方案?【参考方案2】:
如果您使用的是 v7 react-table,请使用 getCellProps
<Table
columns=[
Header: "Age",
accessor: "age"
]
data=[ age: 8 , age: 11 , age: 9 , age: 6 , age: 12 ]
getCellProps=(cellInfo) => (
style:
backgroundColor: cellInfo.value > 10 ? "red" : null
)
/>
https://codesandbox.io/s/magical-yalow-g22yz?file=/src/App.js:2447-2459
【讨论】:
谢谢!你的问题有效!【参考方案3】:我在谷歌上搜索并试图弄清楚这个问题已经有一段时间了,我所能找到的只是关于如何使用样式标签中的三元组的解释,为 1 个值提供 2 种颜色选项。我猜因为如果其他 javascript 它是 CSS,你就不能使用 switch ..
因此,如果有其他人试图用任意数量的颜色和任意数量的值来设置 react-table 的单元格,这是我发现的一种解决方法。现在,举起手来,我是编码新手,这可能比需要的复杂得多,并且可能有更好的方法,但我在其他任何地方都找不到解释。事实上,我什至发现有人说它不能用 react-table v7 来完成,所以我恢复到 v6,因为我发现了一个代码沙箱。但是,它使用了在 v7 中不再存在的单元格的 background-color 属性,这意味着它至少不可能这样做,所以我恢复到 react-table 的 v6 但回来尝试在 v7 上尝试以下内容.
所以,这就是我的管理方式,如果有更好的方法,或者这是否可行,但有办法稍微清理一下,请告诉我!
1 在列中,在要为单元格着色的每一列中创建一个键/值对:functionName
2 创建一个新文件并将函数放入其中,创建一个参数为'cell'的函数并导出它,(它接收单元对象)
3 将其导入列文件,
4 现在在函数文件中,让它像你一样返回一个 html 输入标签 如果有一个返回 jsx 的组件,它基本上是一个......
输入标签中的5给它一个类名并将其设置为className=cell.value
6 也给它一个值,设置它 value=cell.value
7 现在使用 CSS 移除输入字段的边框并使其填充表格的单元格,使其看起来像一个带颜色的普通单元格
这将为您提供一个充满输入字段的表格,但您无法编辑它们,因为它们被设置为隐藏在它们下方的 cell.value,您可以设置它的样式以使其看起来像普通单元格CSS,您可以设置它们的类名并使用 css 将它们定位为颜色。我尝试只返回 div,但它们隐藏了你的单元格的值,也许你可以这样做并在 css 中使用 z-index,但我无法让它工作,CSS 通常不是我的朋友。
如果您希望能够编辑表格单元格,请执行以下操作:
8 使函数成为一个react组件,只需在顶部导入useState,
9 在组件函数中设置一个名为“something”的状态变量
10 将其初始值设置为 cell.value,现在将 className 设置为此变量,
11 现在在输入标签中创建一个 onChange 监听器,在其中创建一个带有 'event' 参数的箭头函数并调用 'setSomething' 并将其设置为 event.target.value。
12 设置另一个名为 say 'isNewEntry' 的状态变量并将其设置为 false
13 在 value 属性中现在使用三元; !isNewEntry ? cell.value : "something" - 即如果单元格尚未被编辑,则将值设置为原始值,如果它已经忽略原始值,现在将其设置为新条目。
我想就是这样.. 对我有用。就像我说的那样,我可能已经把自己与逻辑联系在一起了,可能有办法让它不那么复杂?
函数文件/反应组件:
import useState, useEffect from 'react'
const InputCell = (cell) =>
const [colorClass, setColorClass] = useState(cell.value)
const [isNewCharacter, setIsNewCharacter] = useState(false)
return (
<input
className=colorClass
value=!isNewCharacter ? cell.value : colorClass
onChange=(event)=>
setIsNewCharacter(true)
setColorClass(event.target.value)
/>
)
export default InputCell
const columns =[
Header: "First Name",
Footer: "First Name",
accessor: "first_name",
Cell: inputCell,
,
Header: "Second Name",
Footer: "Second Name",
accessor: "second_name",
Cell: inputCell,
]
【讨论】:
以上是关于React-table 单个单元格样式的主要内容,如果未能解决你的问题,请参考以下文章