如何将 const reactjs 组件转换为基于类的 [英] How to convert const reactjs component to class based

问题描述

我想弄清楚如何转换此代码

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

)

变成这样的基于类的组件

class Home 扩展 React.Component {使成为() {....}}

普通 const 组件我知道如何转换，但我无法理解如何在基于类的组件中包含 match 参数.

解决方案

在你的功能组件定义中

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

)

参数是传递给子组件的道具，但是当您使用 {match} 时，您只会从所有传递的道具中解构道具匹配.

看到这个答案:React 组件中的 children 属性是什么以及 PropTypes 的作用

因此，当将您的功能组件转换为类组件时，您可以在 render 函数中 destructure 属性 match 像

class Child 扩展 React.Component {使成为() {var {match} = this.props;返回 (<div><h3>ID:{match.params.id}</h3>

)}}

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.

解决方案

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>
      )
  }
}

这篇关于如何将 const reactjs 组件转换为基于类的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！