初学者指南 React Props [带语法]
已发表: 2020-09-16React 是一个 MIT 许可的开源 JavaScript 库，用于为应用程序设计交互式 UI。 它是一个基于组件的声明式、灵活且高效的库，使开发人员的生活更轻松。 由于它是一个基于组件的库，因此它将 UI 分为几个单独的部分，称为组件。 这些组件需要相互通信才能正常运行，这就是 React 道具出现的时候。
目录
什么是 React 道具？
“Props”这个词是 React 库中的一个关键字，意思是属性。 它们有时也被称为 React 组件中的全局变量或对象。 React props 类似于 HTML 中的参数。 关于 React props 的一些值得注意的事情是它们总是单向流动，并且其中的数据是只读的。 这使得它们不可变，这意味着从一个组件流出的数据不能在另一个组件中更改。 我们可以通过一个纯函数和不纯函数的例子来理解这一点。
这是一个纯函数，因为它总是为相同的输入提供相同的输出：
功能产品（a，b）{
返回 a * b;
}
这是一个不纯的函数，因为它正在操纵自己的输入：
函数存款（账户，金额）{
account.total += 金额；
}
由于 React props 是不可变的，因此组件需要作为纯函数运行。 这是灵活的 React 库中唯一的严格规则。
传递和访问 React Props 的语法
如前所述，React props 类似于 HTML 参数，因此要向组件传递或添加任何 props，我们可以像传递 HTML 属性一样进行操作。
句法：
<component_name props_name = “价值” />
在上面的语法中，' component_name'是我们需要传递 props 的组件的名称， props_name是 props 的名称， value是 props 的值。
我们可以从组件的类中访问任何道具。
句法：
this.props .props_name;
在上面的语法中，this.props 是一个全局对象，用于访问组件类中的任何 props， props_name是我们要访问的 React props 的名称。
阅读： JavaScript 与 JQuery：JavaScript 和 JQuery 之间的区别
如何使用 React 道具？
在任何组件中使用不可变的 React props 数据有两种不同的方式。 这两种方法是通过在主文件中的 reactDom.render() 函数中添加 props 或在组件本身中添加数据作为默认 props。 以下是两种方式使用 React 道具的方法：
使用 react.Dom.render() 函数中的 React Props
首先我们需要在组件文件中添加道具。
从“反应”导入反应； //导入反应库
class Example extends React.component { /* example 是扩展 React 组件类属性的组件名称 */
使成为（） {
返回 （
<div>
<h2>{this.props. h2 中的firstProp }</h2>
<h3>{这个，道具。 h3 中的secondProp }</h3>
</div>
);
}
}
导出默认示例； //导出组件
现在我们需要通过主文件中的 reactDom.render() 函数为 props 添加值并从那里访问它。
从“反应”导入反应；
从“react-dom”导入 ReactDom；
从'./Example.jsx'导入示例；
ReactDom.render(<示例 firstProp = “这是第一个Prop ” secondProp = “这是第二个Prop ”/>，document.getElementById('example'));
导出默认示例；
结果：
这是h2中的firstProp
这是h3中的secondProp
在组件构造函数中使用带有默认 Props 的 React Props
在组件文件中添加道具及其值。
从“反应”导入反应； //导入反应库
class Example extends React.component { /* example 是扩展 React 组件类属性的组件名称 */
使成为（） {
返回 （
<div>
<h2>{this.props. 第一道具}</h2>
<h3>{这个，道具。 secondProp }</h3>
</div>
);
}
}
示例.deafultProps = {
firstProp : “这是firstProp ”,
secondProp ：“这是secondProp ”
}
导出默认示例； //导出组件
从主文件访问 React 道具。
从“反应”导入反应；
从“react-dom”导入 ReactDom；
从'./Example.jsx'导入示例；
ReactDom.render(< Example />, document.getElementById('example'));
这个输出将类似于 reactDom.render() 函数的使用，除了这次它是在默认道具的帮助下完成的。
查看： Vue vs React：Vue 和 React 之间的区别
如何将 React Props 从一个组件传递到另一个组件
React props 的主要用途是在 React 中的组件之间传递数据。 下面的例子将帮助我们理解数据是如何传递的。
从“反应”导入反应；
类水果扩展 React.Component {
使成为（） {
返回 <h4>我是 {this.props. 名称} 在 h4</h4>
}
}
类问题扩展 React.Component {
使成为（） {
返回 （
<div>
<h3>你是哪种水果？ 在 h3</h3>
< Fruit name = “Mango” / > //创建道具并赋值
</div>
);
}
}
ReactDom.render(<Question />, document.getElementById('fruit'));
这将给出以下输出：
你是哪种水果？ 在 h3
我是h4的芒果
一起使用状态和道具
众所周知，React 是一种动态语言，它的灵活性是它的独特之处。 因此，在开发应用程序时，单独使用 React props 是不够的。 这个问题在国家的帮助下得到了解决。 状态是用于管理数据的另一个 React 特性。 让我们看看我们如何结合 React props 和 state 来使我们的应用程序更具交互性和动态性。
从“反应”导入反应；
类汽车扩展 React.Component {
构造函数（道具）{
超级（道具）；
这个.state = {
firstCar：“这是奔驰！ In h2”, //给状态赋值
secondCar：“这是一辆宝马！ In h3” //给状态赋值
}
}
使成为（） {
返回 （
<div>
<FirstCar firstProp = {this.state.firstCar}/> //给props赋值
<SecondCar secondProp = {this.state.secondCar}/> //给props赋值
</div>
);
}
}
类 FirstCar 扩展 React.Component {
使成为（） {
返回 （
<div>
<h2>{this.props.firstProp}</h2>
</div>
);
}
}
类 SecondCar 扩展 React.Component {
使成为（） {
返回 （
<div>
<h3>{this.props.secondProp}</h3>
</div>
);
}
}
导出默认汽车；
现在，我们需要从主文件访问数据。
从“反应”导入反应；
从 'react-dom' 导入 ReactDOM；
从'./Car.jsx'导入汽车；
ReactDOM.render(<Car />, document.getElementById('car'));
结果：
这是奔驰！ 在 h2
这是一辆宝马！ 在 h3
另请阅读： Node JS 和 React JS 之间的区别
总结一下
React props 和 React 中用于管理数据的状态相结合，使其成为最有用的 JavaScript 库之一。 那里有大量的React 项目想法，只有开发人员才能赋予它们生命。 因此，对 ReactJS 开发人员的需求非常大，他们的工资也在增加。
如果帮助企业创建应用程序并从事大量 React 项目以获得巨额收入的想法让您兴奋，那么是时候采取行动了，以免为时已晚。 您可以参加upGrad提供的在线课程，学习有关 React 的所有知识，并成为一名全栈软件开发人员。
如果您有兴趣了解更多关于 React、全栈开发的信息，请查看 upGrad 和 IIIT-B 的全栈软件开发 PG 文凭，该文凭专为在职专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目，和任务、IIIT-B 校友身份、实用的实践顶点项目和顶级公司的工作协助。