如何使用 lightning design-system-react 在数据表单元格内容中显示基于布尔值？

Question

我的其中一个值是布尔值。我正在关注 components page 中的“高级：加入页眉”，但我不知道如何正确呈现它并且不会在我的浏览器控制台中引发错误。这是我当前的代码：

const CustomBooleanActiveCell = ({ children }) => {
 const stringVal = children ? "Active" : "Inactive";
 return <DataTableCell title={stringVal}>{stringVal}</DataTableCell>;
};
CustomBooleanActiveCell.displayName = DataTableCell.displayName;
//...
<DataTableColumn label="Active" property="active">
      <CustomBooleanActiveCell />
</DataTableColumn>

这样我就可以在 table 中呈现“活动”和“非活动”，但它会在 chrome 的控制台中引发大量错误：

Vscode 也抱怨我的 CustomBooleanActiveCell 和示例的 CustomDataTableCell，说 Property 'children' is missing in type '{}' but required in type '{ [x: string]: any; children: any; }'.

如何更改此数据中单元格的内容table？我可以在输入数据之前映射数据table，但我更喜欢在数据table中编辑它。我也可以选择在 datatable 中显示此数据而不写 CustomDataTableCells?

编辑：我是 运行 design-system-react v0.10.32, react v17.0.2, next v10.2.0.

Answer 1

您可以使用钩子在请求之前初始化您的 stringVal..

const [stringVal, setStringVal] = useState("Inactive");
useEffect(() => {
  setStringVal("your result here");
}, [children]);