我对List中的React.cloneElement有疑问。如果列表中有很多元素,那是我们应该避免做的事情吗?React.cloneElement是否进行了可以避免的不必要的重新渲染?
我的组件:
...
render() {
const { items, classes, children } = this.props;
const { expanded } = this.state;
return (
<List className={classes.root}>
<Scrollbars
style={classes.cssScrollBar}
renderThumbVertical={this.renderThumb}
>
{items.map((item, index) => {
return (
<ListItem key={item.id} className={classes.cssListItemRoot}>
{React.Children.map(children, child =>
React.cloneElement(child, {
id: item.id,
name: `Plan nummber ${index}`,
handleChange: this.handleChange,
isExpanded: expanded === item.id
})
)}
</ListItem>
);
})}
</Scrollbars>
</List>
);
}
...
Run Code Online (Sandbox Code Playgroud) 我可以通过什么方式覆盖全局主题,以便所有使用变体 = 'outlined' 的组件都受该样式的影响。还想覆盖焦点、悬停等事件。
"@material-ui/core": "^3.9.2",
Run Code Online (Sandbox Code Playgroud)