React - 如何在不使用构造函数的情况下访问props

IT技术 javascript reactjs react-native eslint
2021-05-03 06:45:16

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

我有一个使用 React.Component 构建的 React 组件。我不需要设置状态,但我确实有props。我建议的语法如下:

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

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

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

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

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

2个回答

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

因此,如果没用,只需简单地删除构造函数()

您可以使用“this”访问类中没有构造函数的props,如下所示:

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