将const函数转换为组件

Question

我正在尝试将这行代码转换为组件。这行代码有效：

const GlobalCss = withStyles(s)(() => null);
export default GlobalCss;

这是作为组件的外观：

const GlobalCss = function(props){
    return withStyles(props.css)(() => null);
}

但这会编译并显示错误：

对象不能作为React子对象

Answer 1

这可能与material-ui withStyle HOC的问题有关

输入您的代码

const App = function(props){
    return withStyles()(() => null);
}

与下面的arrow function version

相同

const App = props => withStyles()(() => null); // Nop

这可行

const App = withStyles()(() => null); // OK

因此，如果您需要定义props，请在与样式相关的HOC中使用它似乎很好。

const App = withStyles()(props => null); // OK

在产品中，我们还使用了redux connect之类的其他HOC，它们也与withStyles中的道具有关。

示例：

export const ComponentName = withTheme(withStyles(styles)(connect(
  (store: Store) => ({...}), // props
  (dispatch: any) => ({...}) // props
)(YourComponent)));

您可以在这里在线尝试

更新

如果需求需要通过classes通过props

使用withStyles就足够了

interface Props extends WithStyles<typeof styles> {
  classes: any,
  ...

更新V.2

如果您想使用全局样式以及withStyles，则可以选择在withStyles后面建立一个通用的自定义HOC。

export const YourComponent = withStyles()(
  mergeGlobalStylesHOC(() => null)
);

更新V.3

对于功能组件，导出全局样式钩子也是一个好习惯。

如果您想自定义所有材料组件而无需在任何地方编写相关样式，则只需重复使用自定义的组件即可。

Answer 2

您在使用HOC时遇到问题，尝试将这种形状用于反应中的高阶分量 感谢您阅读有关Hoc的信息

with styles是您想要作为GlobalClass注入组件的内容 函数GlobalClass（props）{ ... // null或您想要的返回值 }

export default withStyles(styles)(GlobalClass);

我认为这与您想要的相同

(props=>null)// is equal as the function above

我认为，如果使用该形状，它将告诉我它是否可行