小编rpk*_*rpk的帖子

React.cloneElement在列表中的表现

我对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)

javascript performance reactjs material-ui material-ui-next

4
推荐指数
1
解决办法
1092
查看次数

全局概述覆盖

我可以通过什么方式覆盖全局主题,以便所有使用变体 = 'outlined' 的组件都受该样式的影响。还想覆盖焦点、悬停等事件。

 "@material-ui/core": "^3.9.2",
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui

0
推荐指数
1
解决办法
1968
查看次数