我有一个我希望以表格形式呈现的数字数组。该数组是从 API 调用返回的,而不是由我的应用程序生成的。
数据可能会改变,但不太可能改变,而且无论如何只有 20 个奇数值,所以重新渲染整个表并不是真正的问题。
一个简单的data.map(value => <td>{value}</td>
应该做。
但我不断收到Each child in an array or iterator should have a unique "key" prop.
警告。有什么方法可以告诉 React 没有键,并且如果有任何更改,我希望它重新渲染整个表。
或者,有什么方法可以为每个条目生成唯一的密钥?不保证数据项是唯一的。
我应该补充一点,我了解密钥的用途以及它们为何有用,但在这种情况下,我没有任何密钥,最简单的方法就是不要使用它们,因为不太可能重新渲染。
我正在使用 Material-ui 和 React。我有一个如下所示的列表视图:
<List>
<Subheader>List Title</Subheader>
<ListItem primaryText="Option One" />
<Divider />
<ListItem primaryText="Option Two" />
<Divider />
<ListItem primaryText="Option Three" />
</List>
Run Code Online (Sandbox Code Playgroud)
每个项目之间有一个分隔符,但第一个项目之前或最后一个项目之后没有分隔符。到目前为止,一切都很好。
我刚刚实现了一个简单的包装器,它根据用户权限呈现或不呈现列表项。所以它看起来像这样:
<List>
<Subheader>List Title</Subheader>
<Restricted permission={1}>
<ListItem primaryText="Option One" />
</Restricted>
<Divider />
<Restricted permission={2}>
<ListItem primaryText="Option Two" />
</Restricted>
<Divider />
<Restricted permission={4}>
<ListItem primaryText="Option Three" />
</Restricted>
</List>
Run Code Online (Sandbox Code Playgroud)
Restricted 组件将用户权限与指定权限进行比较,然后返回子组件或 null。这一切都有效,但如果未呈现选项,显然会保留分隔线。
我可以将分隔线与 ListItem 一起包装在 Restricted 组件中,在大多数情况下,它会呈现我想要的内容,但如果最后一个项目未呈现,它会在底部留下一个分隔线。我需要的是一种说法,如果这是列表中的最后一项,则不要渲染分隔线。
目前,我的计划是以编程方式生成可显示列表项的数组,然后使用适当的分隔符在循环中呈现它。但这意味着我将不得不使用它而不是单个包装器的每个组件中的决策逻辑。这感觉不对。
我是否错过了 React/material-ui 的某些方面,可以让我以更优雅的方式实现我想要的目标?
我是React的新手,所以这可能很简单,但是我无法在文档中找到任何内容,因为该元素在ReactDOM之外。
我在用户界面上使用了Material-ui,它提供了两个主题:(lightBaseTheme
默认)主题和darkBaseTheme
深色主题。白天和黑夜模式的排序。问题在于,这两个样式均未应用任何样式,<body>
因此页面背景不会遵循主题。深色主题使用白色文本,该文本不会显示在默认的白色背景上。
我怀疑我需要找到一个编程解决方案,并根据当前加载的主题设置背景色。
但是如何?我尝试将代码放入顶级组件的componentDidUpdate方法中,但这似乎总是返回浅色主题。无论如何,我不确定直接写入DOM是一个好习惯,即使该body
元素在任何会受到React影响的内容之外。
export default class app extends React.Component {
componentDidUpdate () {
const muiTheme = getMuiTheme();
const canvasColor = muiTheme.palette.canvasColor;
document.body.style.backgroundColor = canvasColor;
}
render () {
const muiTheme = getMuiTheme();
return (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<span>Rest of the app goes here</span>
</MuiThemeProvider>
);
}
};
Run Code Online (Sandbox Code Playgroud)
即使在render调用中设置了lightBaseTheme,对componentDidUpdate中的getMuiTheme的调用也始终返回lightBaseTheme。
我也许应该补充一点,最终目的是能够即时更改主题,因此不能直接设置<body
元素的样式。