Reactjs React JSS和TypeScript

我已经使用React有一段时间了，现在我想切换到使用React with TypeScript。然而，我已经习惯了JSS样式（通过

react-JSS

包），我不明白我应该如何在TypeScript中使用它们。我还使用

classnames

包，有条件地分配多个类名，并因此得到TypeSCript错误

以下是我的React组件模板：

import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';

const styles = theme => ({
});

class MyClass extends Component {
    render() {
        const { classes, className } = this.props;
        return (
            <div className={classNames({ [classes.root]: true, [className]: className})}>
            </div>
        );
    }
};

export default withStyles(styles)(MyClass);

import React from 'react';
import withStyles, { WithStylesProps }  from 'react-jss';
import classNames from 'classnames';

const styles = (theme: any) => ({
    root: {
    },
});

interface Props extends WithStylesProps<typeof styles> {
    className?: string,
}

interface State {
}

class Header extends React.Component<Props, State> {
    render() {
        const { classes, className } = this.props;
        return (
            <div className={classNames({ [classes.root as string]: true, [className as string]: className})}>
            </div>
        );
    }
};

export default withStyles(styles)(Header);

import React，{Component}来自'React'；
使用“react jss”中的样式导入；
从“类名称”导入类名称；
常量样式=主题=>({
});
类MyClass扩展组件{
render（）{
const{classes，className}=this.props；
返回(
);
}
};
导出默认样式（样式）（MyClass）；

我只是在学习打字脚本，所以我甚至不确定我是否理解我遇到的错误。我该如何用打字机写上面这样的东西

更新

以下是我最终转换模板的方式：

import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';

const styles = theme => ({
});

class MyClass extends Component {
    render() {
        const { classes, className } = this.props;
        return (
            <div className={classNames({ [classes.root]: true, [className]: className})}>
            </div>
        );
    }
};

export default withStyles(styles)(MyClass);

import React from 'react';
import withStyles, { WithStylesProps }  from 'react-jss';
import classNames from 'classnames';

const styles = (theme: any) => ({
    root: {
    },
});

interface Props extends WithStylesProps<typeof styles> {
    className?: string,
}

interface State {
}

class Header extends React.Component<Props, State> {
    render() {
        const { classes, className } = this.props;
        return (
            <div className={classNames({ [classes.root as string]: true, [className as string]: className})}>
            </div>
        );
    }
};

export default withStyles(styles)(Header);

从“React”导入React；
从“react jss”导入带有样式的{WithStylesProps}；
从“类名称”导入类名称；
常量样式=（主题：任意）=>({
根目录：{
},
});
界面道具使用StylesProps扩展{
类名？：字符串，
}
界面状态{
}
类头扩展了React.Component{
render（）{
const{classes，className}=this.props；
返回(
);
}
};
导出默认样式（样式）（标题）；

要记住的事情：

• 定义

  样式

  对象时，必须定义

  呈现

  方法中引用的

  类

  的任何成员。如果没有TypeScript，您可以“使用”大量类而不定义它们，比如占位符；有了TypeScript，他们都必须在那里
• 在调用

  classnames

  函数时，必须键入所有键。如果它们来自可能为null或未定义的变量，则必须将

  添加为string

  ，或者将它们转换为string。除此之外，

  className

  属性的工作原理与不使用TypeScript时相同

  ---

使用TypeScript，您需要定义道具，如中所示。如果React组件只需要

render

方法，则还建议使用函数组件

对于您的情况，代码应该如下所示：

import React from 'react';
import withStyles, { WithStyles } from 'react-jss';
import classNames from 'classnames';

const styles = theme => ({
  root: {

  }
});

interface IMyClassProps extends WithStyles<typeof styles> {
  className: string;
}

const MyClass: React.FunctionComponent<IMyClassProps> = (props) => {

    const { classes, className } = props;
    return (
        <div className={classNames({ [classes.root]: true, [className]: className})}>
        </div>
    );
};

export default withStyles(styles)(MyClass);

从“React”导入React；
从'react jss'导入withStyles，{withStyles}；
从“类名称”导入类名称；
常量样式=主题=>({
根目录：{
}
});
接口IMyClassProps使用样式扩展{
类名：string；
}
常量MyClass:React.FunctionComponent=（道具）=>{
const{classes，className}=props；
返回(
);
};
导出默认样式（样式）（MyClass）；

你能举一个你所遇到的错误的例子吗？@casieber我认为它们没有什么意义。我找不到任何关于React JS with TypeScript的参考资料，当我偶然发现它们时，我试图“修复”它们。所以大多数错误可能是我尝试错误的解决方案造成的。谢谢你的指点！我在第2行的“WithStyles”中遇到了这个错误：

Module'/node\u modules/react jss/src''没有导出的成员“WithStyles”。你的意思是使用“从“/node\u modules/react jss/src”导入WithStyles”吗？

，这在我看来似乎很荒谬……我发现，

WithStyles

被弃用，而使用

WithStyleProps

。这就是你的意思吗？现在，当我使用我的组件而不为

className

指定值时，我得到的

计算属性名称必须是'string'、'number'、'symbol'或'any'类型。但是，我并不总是想指定它-但是如果我更改
IMyClassProps
的定义以包括
className？：string
，那么我会得到上面的错误。最后一个更新：我通过在backticks中使用
${className}
使它编译（通过类型检查）。非常感谢。