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

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 组件中的 children 属性是什么以及 PropTypes 是做什么的

所以，你的功能组件转换为类组件时，你可以destructure在道具match中的render类似功能

class Child extends React.Component {

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