Реагируйте на JSS и TypeScript - PullRequest
Новая
       11

Реагируйте на JSS и TypeScript

1 голос
/ 07 января 2020

Я уже некоторое время использую React, и теперь я хочу перейти на использование React с 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);

Я просто изучаю TypeScript, поэтому я не уверен, что даже понимаю ошибки, которые я получаю. Как бы я написал что-то подобное в TypeScript?

ОБНОВЛЕНИЕ

Вот как я окончательно преобразовал свой шаблон: 

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);

имейте в виду:

  • при определении объекта styles любой член classes, на который ссылается метод render , должен быть определен . Без TypeScript вы могли бы избежать «использования» большого количества классов и не определять их, как заполнитель; с TypeScript все они должны быть там;
  • при вызове функции classnames все клавиши должны быть набраны. Если они получены из переменной, которая может быть нулевой или неопределенной, у вас есть для добавления as string или для преобразования их в строку в противном случае. Кроме этого, свойство className работает так же, как и без TypeScript.

1 Ответ

1 голос
/ 07 января 2020

С 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);
...