Преобразование класса material-ui в функцию - PullRequest
Новая
       139

Преобразование класса material-ui в функцию

0 голосов
/ 30 мая 2020

Я изучаю material-ui, и большая часть доступного кода использует классы (с которыми я больше знаком с объектно-ориентированного фона). Но новая парадигма предположительно предполагает использование классов ввода-вывода функций из-за введения перехватчиков.

Я вижу всевозможные вопросы о преобразовании функций в классы, но не могу найти ОДНОГО примера преобразования класса в класс. функция.

Я пытаюсь преобразовать этот код в функцию: 


class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

Я не знаю, как обращаться с оператором super (props). Вот моя попытка, которая не работает. 


function MouseTracker(props) = {
{
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

export default MouseTracker

Большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 30 мая 2020

Я думаю, вы можете поискать онлайн-материалы, основанные на «Функциональных компонентах React», чтобы узнать, как преобразовать классы в функции. Эти компоненты написаны так, как если бы они были javascript функциями и используют перехватчики React для обработки состояний и других вещей

«super (props)» - это синтаксис класса конструктора React. Так что это не нужно при написании функциональных компонентов

Также обратите внимание на разницу между синтаксисом es6 и js, функция MouseTracker (props) = {..} недопустима.

Вот рабочий пример на основе трекера мыши: https://codesandbox.io/s/react-functional-component-demo-ytbrn?file= / demo. js

Вот несколько примеров из документации ReactJs 'и его хуки шаблон:

...