React 17 Deprecate "module pattern" components

Question

React 17 Вот тут: https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#deprecate-module-pattern-components

описан Deprecate "module pattern" components

Я так и не смог понять предлагаемый паттерн. Описание типа в React 17 говорит что можно вернуть объект, содержащий функцию, propTypes, contextTypes, defaultProps, displayName В типе не сказано ни про какой onClick И предлагаемый паттерн вызывает ошибку.

Ранее я нигде (в том числе и в документации) не встречал возврата объекта и предлагаемая документом конструкция дает ошибку типа:

interface someProps {
  props1: string;
}
function Foo(props): React.FC<someProps> {
  return {
    onClick() {
      console.log("aa");
    },
    render() {
      return <div onClick={this.onClick.bind(this)} />;
    },
  };
}
Foo.prototype = { isReactComponent: true };

Поясните пожалуйста - кто разобрался с Deprecate "module pattern" components - как правильно ныне писать React.FC ?

Второй вопрос в связи с этим - ОК, свои компоненты я перепишу - а что делать со сторонними библиотеками ?

Answer 1

Вот один из вариантов написания функциональных компонентов на React. (Мне нравится больше всего, поэтому я везде предпочитаю его использовать)

type Props = {
  myProp?: string
}

const MyComponent: React.FC<Props> = ({children, myProp}) => {
  ...some logic
  return <div>
    {children}
  </div>
}

export default MyComponent

Так компонент получает displayName, что помогает при дебаге.

Если пользоваться записью описанной у вас, то это будет уже не функциональный компонент, т.е. тип React.FC не подойдет. Раньше такая запись работала, но в 17 реакте придется дополнительно указывать Foo.prototype = { isReactComponent: true };, что делает такую запись неудобной для большинства компонентов. Конечно могут быть случаи, когда в компоненте захочется иметь дополнительные методы или свойства (например, чтобы потом использовать их с помощью ref), тогда можно использовать такую запись, но тип скорее всего придется писать самому(React.FC не подойдет)

БЛОГ НА HUSL

React 17 Deprecate "module pattern" components

Ответы (1 шт):