React - 如何在不使用构造函数的情况下访问道具答案

【问题标题】：React - How to access props without using constructorReact - 如何在不使用构造函数的情况下访问道具
【发布时间】：2018-03-31 20:43:27
【问题描述】：

注意：我在使用 React Native 时遇到了这个特定问题，但我想这也适用于 React。

我有一个使用 React.Component 构建的反应组件。我不需要设置状态，但我确实有道具。我建议的语法如下：

class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>{this.props.title}</div>;
  }
}

我知道我可以使用函数来构造这个组件，如下所示：

const Header = (props) => {
  return <div>{props.title}</div>;
}

但我更喜欢前者，因为我的组件会增长，可能会有状态等，我只想让我的所有组件都以类似的方式构建。

现在，我的 linter 抱怨有一个无用的构造函数，但是我如何在保留类构造函数而不是函数构造函数的同时访问道具？

【问题讨论】：

不添加构造函数你仍然可以在你的组件中使用this.props。这不是必须的。
你刚刚尝试删除构造函数吗？
哇。这样可行。但是，为什么我已经做了两年 super(props) 了...super(props) 只有在创建用于初始化状态的构造函数时才需要？
暂时移除构造函数。您可以稍后在开始使用 state 时将其放入
类实例化后直接被React调用构造函数。仅当您希望在该时间点执行时才需要，例如设置初始状态。如果您想与“构造函数中”的道具进行交互，则需要调用 super(props)。

【解决方案1】：

如果要在构造函数中使用this.props，需要将props传递给super。否则，没关系，因为 React 在调用构造函数后立即从外部为实例设置了 .props。

如果没有用，只需简单地删除 constructor()

【讨论】：

【解决方案2】：

您可以使用“this”在类中访问没有构造函数的道具，如下所示：

class XXXXXX extends React.Component {
   render() {
       return (
          <div>{this.props.value}</div>
       )
   }
}

【讨论】：