如何将静态数据传递到 React 组件

介绍

静态数据可以作为各种用途的来源，例如显示静态信息、维护应用程序范围的配置信息以及与 JSX 元素一起渲染静态数据。React 支持 props 和 state，这是管理组件间静态和动态数据的基础。通过本指南，您将了解如何将静态数据（例如 props 和 state 数据）传递给组件。

将状态数据传递给组件

状态是一个普通的 JavaScript 对象，由键值对作为对象数据组成。因此，状态数据可以从父组件传递到子组件，反之亦然。

第一种方法是将状态数据从父组件传递到子组件，如下所述。

像这样将静态数据创建到状态对象中。

      constructor() {
    super();
    this.state = {
      name: "hey123",
      age: "30",
      occupation: "designer"
    };
}
    

并将状态值传递给子组件，如下所示。

      render() {
    return (
      <div>
        <p>2. Pass data using state</p>
        <hr />
        <ChildComponent
          name={this.state.name}
          age={this.state.age}
          occupation={this.state.occupation}
        />
      </div>
    );
}
    

从子组件中，它可以作为props访问。

      render() {
    const { name, age, occupation } = this.props;
    return (
      <div>
        <p>Student detail :</p>
        <hr />
        <table>
          <tr>
            <td>Name :</td>
            <td>{name}</td>
          </tr>
          <tr>
            <td>City :</td>
            <td>{age}</td>
          </tr>
          <tr>
            <td>College :</td>
            <td>{occupation}</td>
          </tr>
        </table>
      </div>
    );
}
    

所有状态值都从 props 中提取出来，用于与表格一起呈现数据。

      const { name, age, occupation } = this.props;
    

下一种方法是通过触发事件将静态数据从子组件传递到父组件。

从子组件中创建一个按钮以及来自父组件的函数名称，如下所示。

      <button
    onClick={this.props.onButtonClick({
        name: "test123",
        age: "25"
    })}
    >
    Click to send
</button>
    

单击按钮后，可以从父组件访问该对象。为此，您需要将函数名称传递给子组件。

      render() {
    return (
      <div>
        <ChildComponent
          // pass action to child
          onButtonClick={this.onButtonClick}
        />
      </div>
    );
}
    

并且父组件的功能应该类似下面的示例。

      onButtonClick(data) {
    console.log("Data coming from child component :", data)
}
    

将 Props 数据传递给组件

Props 和 states 相对来说是等同的，但是显著的区别是 props 的值是不能被修改的，也就是说 props 的值是不可变的。

如果你在组件中使用状态数据并将其传递给子组件，那么它将成为子组件的 props。

创建一个名为student 的状态对象，如下所示。

      constructor() {
    super();
    this.state = {
      student: {
        name: "test123",
        city: "testcity",
        college: "xyzcollege"
      }
    };
}
    

将学生对象从状态传递到子组件。

      render() {
    return (
      <div>
        <p>Pass data using props</p>
        <ChildComponent student={this.state.student} />
      </div>
    );
}
    

如您所见，有一个正在使用的添加属性，称为student，以及子组件。

      <ChildComponent student={this.state.student} />
    

一旦将数据传递给子组件，它将变得不可变，但它可以从子组件用作数据源，如下所示。

      render() {
    const { student } = this.props;
    return (
      <div>
        <p>Student detail :</p>
        <hr />
        <table>
          <tr>
            <td>Name :</td>
            <td>{student.name}</td>
          </tr>
          <tr>
            <td>City :</td>
            <td>{student.age}</td>
          </tr>
          <tr>
            <td>College :</td>
            <td>{student.occupation}</td>
          </tr>
        </table>
      </div>
    );
}
    

这是将数据作为 props 传递给 React 应用程序中的各个组件的标准方法。

其他方法

state 和 props 是组件内外数据操作的典型代表，但还有其他方法可以将静态数据传递给组件，如下所示。

Redux 全局状态管理（如果组件没有关系）
JavaScript 窗口对象
React 上下文 API

结论

将静态数据传递给组件是任何需要源数据进行渲染并根据其值操作元素的应用程序的重要组成部分。

State 和 props 是跨组件处理静态和动态数据的常规方法之一。我希望它能帮助您理解实现和使用静态数据的策略。继续学习。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文