Как преобразовать компонент constactjs в класс на основе

Question

Я пытаюсь выяснить, как конвертировать этот код

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

В компонент на основе классов, как это

class Home extends React.Component {

  render() {
      ....
  }
}

Нормальные компоненты const Я знаю, как конвертировать, но я не могу понять, как включить match параметр в компоненте на основе класса.

Answer 1

В вашем определении функционального компонента

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

Аргумент - это реквизиты, передаваемые дочернему компоненту, однако при использовании {match} вы удаляете только опору из всех опор, переданных вниз.

Посмотрите этот ответ: что такое дочерний реквизит в компоненте React и что делает PropTypes

Поэтому при преобразовании вашего функционального компонента в компонент класса вы можете destructure опора match в render функционировать как

class Child extends React.Component {

  render() {
      var {match} = this.props;
      return (
         <div>
             <h3>ID: {match.params.id}</h3>
           </div>
      )
  }
}

Answer 2

функция:

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

Учебный класс:

import React, { Component } from 'react';

class Child extends Component {
  render(){
    const {match} = this.props;
    return (
      <div>
         <h3>ID: {match.params.id}</h3>
       </div>
    );
  }
}
export default Child;