javascript - 如何将 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>
)

参数是传递给 Child 组件的 Prop ，但是当您使用 {match} 时，您只是从所有传递下来的 Prop 中分解 Prop 匹配。

查看此答案:What is the children prop in React component and what PropTypes do

因此，当将您的功能组件转换为类组件时，您可以解构 render 函数中的 prop match，例如

class Child extends React.Component {

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