如何将const reactjs组件转换为基于类

Question

I am trying to figure out how to convert this code

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

Into a class based component like this

class Home extends React.Component {

  render() {
      ....
  }
}

Normal const components I know how to convert, but I am not able to understand how to include match parameter in class based component.

Answer 1

In your functional component definition

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

The argument is the props passed down to the Child component, however when you use {match} you are detructuring only the prop match from all the props passed down.

See this answer: What is the children prop in React component and what PropTypes do

So when converting your functional component to the class component you can destructure the prop match in the render function like

class Child extends React.Component {

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

Answer 2

function:

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

Class:

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;