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}时，你只是从传递下来的所有道具中解构道具匹配。

请参阅此答案：What is the children prop in React component and what PropTypes do

因此，在将功能组件转换为类组件时，您可以destructure match函数中的render {/ 1}}

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;

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

2 个答案: