react中什么是父子组件
- 作者：互联网
- 时间：2022-07-20 14:36:09
在react组件的相互调用中，把调用者称为父组件，被调用者称为子组件。父子组件间可以传值：1、父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值；2、子组件向父组件传值时，需要通过触发方法来传递给父组件。
本教程操作环境：Windows7系统、react18版、Dell G3电脑。
一、React中的组件
react组件就是自己定义的非html标签，规定react组件首字母大写：
class App extends Component{}
二、父子组件
组件的相互调用中，把调用者称为父组件，被调用者称为子组件：
import React from 'react';import Children from './Children';class Up extends Re***.Component { constructor(props){ super(props); th***state = { } } render(){ co***le.log("render"); return( up
) }}export default Up;import React from 'react';class Children extends Re***.Component{ constructor(props){ super(props); th***state = { } } render(){ return ( Children
) }}export default Children;三、父组件给子组件传值
父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。
父组件在调用子组件的时候定义一个属性：
这个值msg会绑定在子组件的props属性上，子组件可以直接使用：
th***props.msg父组件可以给组件传值，传方法，甚至可以把自己传递给子组件
3.1 传值
import React from 'react';import Children from './Children';class Up extends Re***.Component { constructor(props){ super(props); th***state = { } } render(){ co***le.log("render"); return( up
) }}export default Up;import React from 'react';class Children extends Re***.Component{ constructor(props){ super(props); th***state = { } } render(){ return ( Children
{th***props.msg}
) }}export default Children;{th***props.msg}
3.2 传方法
import React from 'react';import Children from './Children';class Up extends Re***.Component { constructor(props){ super(props); th***state = { } } run = () => { co***le.log("父组件run方法"); } render(){ co***le.log("render"); return( up
) }}export default Up;import React from 'react';class Children extends Re***.Component{ constructor(props){ super(props); th***state = { } } run = () => { th***props.run(); } render(){ return ( Children
) }}export default Children;
3.3 将父组件传给子组件
import React from 'react';import Children from './Children';class Up extends Re***.Component { constructor(props){ super(props); th***state = { } } run = () => { co***le.log("父组件run方法"); } render(){ co***le.log("render"); return( up
) }}export default Up;import React from 'react';class Children extends Re***.Component{ constructor(props){ super(props); th***state = { } } run = () => { co***le.log(th***props.msg); } render(){ return ( Children
) }}export default Children;
四、子组件给父组件传值
子组件向父组件传值通过触发方法来传值
import React from 'react';import Children from './Children';class Up extends Re***.Component { constructor(props){ super(props); th***state = { } } getChildrenData = (data) => { co***le.log(data); } render(){ co***le.log("render"); return( up th***getChildrenData}/>
) }}export default Up;import React from 'react';class Children extends Re***.Component{ constructor(props){ super(props); th***state = { } } render(){ return ( Children
) }}export default Children;
五、父组件中通过refs获取子组件属性和方法
import React from 'react';import Children from './Children';class Up extends Re***.Component { constructor(props){ super(props); th***state = { } } clickButton = () => { co***le.log(th***refs.children); } render(){ co***le.log("render"); return( up
) }}export default Up;``````jsimport React from 'react';class Children extends Re***.Component{ constructor(props){ super(props); th***state = { title: "子组件" } } runChildren = () => { } render(){ return ( Children
) }}export default Children;``` 上一篇： react新旧生命周期的区别是什么
下一篇： 什么是react条件渲染
相关阅读
- react受控组件是什么 2022-07-04
- react非受控组件是什么意思 2022-07-04
- react有组件库吗 2022-07-06
- react项目中如何运行vue组件？方法介绍 2022-09-19
- react中context是什么 2022-07-06
- react同构应用是什么 2022-07-04