如何在反应类组件中使用 react-jss？答案

【问题标题】：How to use react-jss within react class Components?如何在反应类组件中使用 react-jss？
【发布时间】：2019-12-31 16:16:39
【问题描述】：

在react-jss documentation，作者写道： '基于 HOC 的 API 自 v10 起已弃用，将在 v11 中删除。'

据我了解，这意味着像 injectSheet 和 withStyles 这样的 HOC 功能在 V11 中将不再可用。

新的基于 react 的样式表生成函数似乎都是基于 react 钩子的。 createUseStyles 函数对我和我的团队来说似乎很有希望，直到进一步查看源代码后，我们才意识到它只能在函数组件中使用，因为它使用了钩子。

问题

作为一个团队，我们仍然大量使用 React Class 组件，并且没有计划完全转向钩子，不是因为钩子没有用，而是因为有时函数式组件不是编写一个最好或最有组织的解决方案零件。

也许我遗漏了一些东西——但似乎除了从核心 jss 编写我们自己的手动实现之外，现在对于基于 React 类的组件没有任何解决方案。

开发人员有什么解决方案可以以类似于createUseStyles 实现的方式使用react-jss，跟上最新版本的react-jss，能够传递动态道具等。不写手动实现？

【问题讨论】：

标签： css reactjs jss

【解决方案1】：

import { Classes } from 'jss';
import { createUseStyles } from 'react-jss';

首先，让我们创建一个类型更安全的函数来创建样式。

export function createStyles(classes: { [name: string]: Partial<CSSStyleDeclaration> }) {
    return createUseStyles(classes as any);
}

其次，我们将创建一个简单的包装器来允许我们的组件使用钩子。

function Styles<T extends string | number | symbol>(props: { styles: () => Classes<T>, children: (classes: Classes<T>) => ReactElement }) {
    const classes = props.styles();
    return props.children(classes);
}

示例

const styles = createStyles({
    title: {
        fontSize: '25px',
        textTransform: 'uppercase'
    },
    message: {
        color: 'red'
    }
});

export const App = () => (
    <Styles styles={styles}>
        {classes => (
            <Fragment>
                <h1 className={classes.title}>Title</h1>
                <p className={classes.message}>message</p>
            </Fragment>
        )}
    </Styles>
);

输出

【讨论】：

【解决方案2】：

虽然不是特定于 JSS，但请记住，您始终可以使用小型包装器将任何 Hook 转换为渲染道具或 HOC。

这里描述了将 Hook 转换为渲染道具：https://reacttraining.com/blog/using-hooks-in-classes/

您可以使用类似的方法将任何 Hook 转换为 HOC。

【讨论】：

感谢您的建议，丹。从某种意义上说，我只是不知道在类的 render 方法中渲染子组件的能力，但是可以访问这个子组件的 render 方法并且仍然使用钩子。对我们来说，这将毫无问题地工作。我做了一个演示只是为了测试这个概念：repl.it/@EvanGarrett/React-Jss-ClassComponents