withStyles(styles)(HigherOrderComponent);

HigherOrderComponent 的props自动添加classes 属性了

// see http://redux-form.com/6.4.3/examples/material-ui/
const renderInput = ({ meta: { touched, error } = {}, input: { ...inputProps }, ...props }) => (
	<TextField error={!!(touched && error)} helperText={touched && error} {...inputProps} {...props} fullWidth />
);

redux-form

redux-form.com/6.4.3/examp… www.jianshu.com/p/7e1b2e9c1…

// 创建一个 theme Context,  默认 theme 的值为 light
const ThemeContext = React.createContext('light');
// Context 是 提供单一的值的 . 需要通过 .Consumer 来获取
// 相当于外部变量吧
function ThemedButton(props) {
  // ThemedButton 组件从 context 接收 theme
  return (
    <ThemeContext.Consumer>
      {theme => <Button {...props} theme={theme} />}
    </ThemeContext.Consumer>
  );
}

// 中间组件
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

suspense

// lazy load SettingDrawer
const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer'));

 <Suspense fallback={<PageLoading />}><SettingDrawer /> </Suspense>
 fallback 是正在加载中...

<></> 是 <React.Fragment/> 的语法糖。

用来包含多个元素

读代码 react-admin

redux-form

suspense