javascript - 在 React JS 中将 props 从一个类组件传递到另一个类组件

Question

我正在学习 React js 的初学者类(class)。我遇到了类组件，我想知道 props 对象是如何初始化的。

例如:

主要组件:

class App extends React.Component {
    render() {
        return (
            <div>
                <Header username="xyz"/>
            </div>
        )
    }
}

标题:

class Header extends React.Component {
    render() {
        return (
            <div>
                <p>Welcome, {this.props.username}</p>
            </div>
        )
    }
}

我想知道 Header 类中的 props 对象是否正在初始化？

不应该是这样的吗:

class Header extends React.Component {
    constructor(props) {
        super()
        this.props = props
    }
    render() {
        return (
            <div>
                <p>Welcome, {this.props.username}</p>
            </div>
        )
    }
}

通过使用上面的代码，我收到一条消息:

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

我的问题是，如果我们想向类传递任何内容，难道不应该使用构造函数来完成吗？

Answer 1

通过扩展 React.Component，React 可以为你做到这一点。

切勿在接收组件内更改 props 对象。 React 类组件将收集您传递给组件的所有参数，并通过通用名称“props”引用它们。这就是为什么您不必在构造函数中自己执行此操作。

然而，在现代 React 中，类组件很少被使用。原因是类组件很容易导致复杂的生命周期管理。

作为函数而不是类编写的 Header 组件将如下所示:

const Header = (props) => (
  <div>
      <p>Welcome, {props.username}</p>
  </div>
)

直接解构 props 也很常见，这样你就永远不会真正访问 props 对象，如下所示:

const Header = ({username}) => (
  <div>
      <p>Welcome, {username}</p>
  </div>
)

对于功能组件，您可以自由地为 Prop 使用任何您想要的名称。但我不会这样做，因为人们习惯于将 Prop 称为 Prop 。但这也可以:

const Header = (params) => (
  <div>
      <p>Welcome, {params.username}</p>
  </div>
)