通过组件的渲染函数传递 Props
介绍
树形结构与浏览器中发生的任何编程都密切相关。文档对象模型（简称 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文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
