通过组件的渲染函数传递 Props

2020-11-09 08:00:00 · 飞浪

React 在将数据从父组件传递到子组件时，主要遵循自上而下的方法。组件的渲染函数是数据传输发生的地方。

介绍

树形结构与浏览器中发生的任何编程都密切相关。文档对象模型（简称 DOM）包含页面上要显示的所有 HTML 元素，本身就是一个大型树形结构。因此，React 组件层次结构自然会以相同的方式建模，尽管使用的是 JavaScript 而不是原始 HTML。

React 组件包含子组件，而子组件又可以包含更多子组件，以此类推。组件的这种父子关系结构意味着，当你在 React 中编写代码时，你经常需要将数据从父组件传递到子组件。实现这一点的主要方法之一是通过传递组件 props。

在本指南中，您将了解向子组件传递数据的主要机制之一：在渲染函数内部将 props 传递给子组件。

让我们开始吧！

传递 Props

将 props 从父组件传递给子组件非常简单。首先，确保您有一个父组件。在下面的示例中，名为MyApp的根级 React 组件充当父组件。

从这里，您可以创建所需的子组件。在下面的示例中，有三个子组件：TitleBar、NavBar和DataView 。这三个组件希望它们的数据通过从父组件传入的 props 获得。您可以通过在父组件渲染函数内部声明这些 props 时将这些 props 传递给子组件来实现这一点。下面的代码显示了这种可能性。

      import React from 'react';

class MyApp extends React.Component {
    dataPoints = [ 1, 2, 3, 4, 5 ];
    title = "Welcome To My App!";
    navStructure = [
        {
            text: "Home",
            url: "/home"
        },
        {
            text: "About",
            url: "/about"
        },
        {
            text: "Contact Us",
            url: "/contact-us"
        }
    ];



    render() {
        const { title, navStructure, dataPoints } = this.props;

        return (
            <div>
                <TitleBar title={ title } />
                <NavBar navStructure={ navStructure }>
                <DataView data={ dataPoints }>
            </div>
        )
    }

}
    

如您所见，父组件MyApp在实例化时声明了三个属性。这些属性是dataPoints、title和navStructure。接下来，仔细查看render函数，您可以看到我们前面提到的子组件在其中声明。此外，每个声明的组件属性都会传递给正确的子组件。上述语法是促进 React 中这种特定类型的数据传输所需的语法。

结论

从数据传输角度来看，通过 props 将数据从父组件传递到子组件是 React 应用结构的重要组成部分。在将数据从父组件传递到子组件时，React 在很大程度上遵循自上而下的方法。组件的渲染函数是数据传输发生的地方。

但这并不是传递数据的唯一方法！您还可以将组件状态从父组件传递到子组件。不仅如此，新的上下文 API 以及 React 门户还允许您以各种其他方式传输数据，从而更好地满足您的应用需求。

有关 React 的更多信息以及在应用内传输数据的不同方式，请查看 React文档。

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

_查看原文

技术指南

阅读全文

通过组件的渲染函数传递 Props

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; class MyApp extends React.Component { dataPoints = [ 1, 2, 3, 4, 5 ]; title = "Welcome To My App!"; navStructure = [ { text: "Home", url: "/home" }, { text: "About", url: "/about" }, { text: "Contact Us", url: "/contact-us" } ]; render() { const { title, navStructure, dataPoints } = this.props; return ( <div> <TitleBar title={ title } /> <NavBar navStructure={ navStructure }> <DataView data={ dataPoints }> </div> ) } }