使用表示组件实现Material Design的实现

Question

是否可以将Material UI与无状态组件一起使用，或者是否需要使用？

我打算实施Popovers，从我从官方code example收集的是它是国家依赖的。

Answer 1

它取决于Material UI组件。

有些是理想的，并且被推荐为无状态组件。实际上，Material UI文档中的许多示例都使用无状态组件。例如，<Badge />组件：

const BadgeExampleSimple = () => (
  <div>
    <Badge
      badgeContent={4}
      primary={true}
    >
      <NotificationsIcon />
    </Badge>
    <Badge
      badgeContent={10}
      secondary={true}
      badgeStyle={{top: 12, right: 12}}
    >
      <IconButton tooltip="Notifications">
        <NotificationsIcon />
      </IconButton>
    </Badge>
  </div>
);

或者<Icon />：

const HomeIcon = (props) => (
  <SvgIcon {...props}>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </SvgIcon>
);

其他组件要求他们有条不紊地管理像open这样的状态。

不幸的是，这就是<Popover />组件的情况。

export default class PopoverExampleSimple extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      open: false,
    };
  }

  ...
}

那么，回答你的问题：

• 是的，如果组件不需要状态，则可以使用无状态组件
• 不，除非组件需要状态，否则不要求使用有状态组件