React 如何在子组件中获取父组件传递的参数
在 React 组件化开发中，组件间的参数传递是一个必须要涉及的话题。在 React 中，我们可以通过 props 传递参数，然后在子组件中获取父组件传递的参数。
父组件传递参数
我们先来看看父组件怎样传递参数。
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
render() {
return (<ChildComponent name="Lucy" age={18} />);
}
}在父组件的 render 函数中，通过 props 把参数传递给 ChildComponent 子组件。在这个例子中，我们传递了两个参数：一个叫做name，值为"Lucy"，另一个参数叫做age，值为18。注意，props 传递参数的方式类似于传递函数的方式，通过属性名赋值的方式实现。
子组件获取参数
接下来，我们来看看在子组件中，怎样获取父组件传递的参数。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------------- ------- --------------- -
-------- -
------ -
-----
-------- ---------------------
------- --------------------
------
--
-
-在子组件中，我们通过 this.props 来访问父组件传递的参数。这个例子中，我们分别打印了传递过来的 name 和 age 参数。
子组件中修改父组件参数的方法
有时候，我们需要在子组件中改变父组件传递过来的参数。但是，React 中是不允许直接修改父组件的 props 的，这是因为 props 是父组件传递给子组件的不变值。如果你想在子组件中修改传递过来的参数，你需要做一些额外的工作。
在子组件中改变父组件的传递参数，最简单的方式就是通过回调函数来实现。我们可以通过 onClick 或者 onChange 等事件触发回调函数，然后将子组件中改变的参数传递给父组件的回调函数。父组件接收到回调函数后，再通过 setState 的方式更新子组件中的 props。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------------- ------- --------------- -
----------- - -- -- -
--------------------------------
-
-------- -
------ -
-----
-------- ---------------------
------- --------------------
------- ----------------------------- -------------
------
--
-
-
----- --------------- ------- --------------- -
----- - -
----- -------
---- --
-
---------------- - ------ -- -
--------------- ---- ---
-
-------- -
------ -
---------------
----------------------
--------------------
------------------------------------
--
--
-
-在上例中，我们传递了一个名为 onChangeName 的回调函数给子组件 ChildComponent。在子组件中的 handleClick 函数中，当按钮被点击时，我们通过 onChangeName 回调函数将新的名字 "Lily" 传递给父组件。在父组件接收到传递的新名字后，我们通过 setState 更新父组件的 name 状态。这样一来，ChildComponent 就能够获取到更新后的 name 参数了。
总结
在 React 的组件化开发中，props 是一种非常常见而且实用的参数传递方式。通过这种方式，我们可以方便地将参数从父组件传递给子组件。通过回调函数的方式，我们也能够在子组件中修改父组件的参数。因此，在 React 中熟练掌握使用 props 是很重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b95a1968c7c53b0de302f