在react组件的相互调用中，把调用者称为父组件，被调用者称为子组件。父子组件间可以传值：1、父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值；2、子组件向父组件传值时，需要通过触发方法来传递给父组件。
本教程操作环境：windows7系统、react18版、dell g3电脑。
一、react中的组件react组件就是自己定义的非html标签，规定react组件首字母大写：
class app extends component{}3efbfcf616b81c5b71826e3d65d503c4
二、父子组件组件的相互调用中，把调用者称为父组件，被调用者称为子组件：
import react from 'react';import children from './children';class up extends react.component {    constructor(props){        super(props);        this.state = {                    }    }        render(){        console.log(render);        return(            dc6dce4a544fdca2df29d5ac0ea9906b                up                fbcbeebb0d4eb5f8bb2ddf5217cb012e            16b28748ea4df4d9c2150843fecfba68        )    }}export default up;
import react from 'react';class children extends react.component{    constructor(props){        super(props);        this.state = {                    }    }        render(){        return (            dc6dce4a544fdca2df29d5ac0ea9906b                children            16b28748ea4df4d9c2150843fecfba68        )    }}export default children;
三、父组件给子组件传值父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。
父组件在调用子组件的时候定义一个属性：
d3f08141287940ebfc9442c4aec88c90
这个值msg会绑定在子组件的props属性上，子组件可以直接使用：
this.props.msg
父组件可以给组件传值，传方法，甚至可以把自己传递给子组件
3.1 传值import react from 'react';import children from './children';class up extends react.component { constructor(props){ super(props); this.state = { } } render(){ console.log("render"); return( <div> up <children msg="父组件传值给子组件" /> </div> ) }}export default up;
import react from 'react';class children extends react.component{ constructor(props){ super(props); this.state = { } } render(){ return ( <div> children <br /> {this.props.msg} </div> ) }}export default children;
3.2 传方法import react from 'react';import children from './children';class up extends react.component { constructor(props){ super(props); this.state = { } } run = () => { console.log("父组件run方法"); } render(){ console.log("render"); return( <div> up <children run={this.run} /> </div> ) }}export default up;
import react from 'react';class children extends react.component{ constructor(props){ super(props); this.state = { } } run = () => { this.props.run(); } render(){ return ( <div> children <br /> <button onclick={this.run}>run</button> </div> ) }}export default children;
3.3 将父组件传给子组件import react from 'react';import children from './children';class up extends react.component { constructor(props){ super(props); this.state = { } } run = () => { console.log("父组件run方法"); } render(){ console.log("render"); return( <div> up <children msg={this}/> </div> ) }}export default up;
import react from 'react';class children extends react.component{ constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); } render(){ return ( <div> children <br /> <button onclick={this.run}>run</button> </div> ) }}export default children;
四、子组件给父组件传值子组件向父组件传值通过触发方法来传值
import react from 'react';import children from './children';class up extends react.component { constructor(props){ super(props); this.state = { } } getchildrendata = (data) => { console.log(data); } render(){ console.log("render"); return( <div> up <children upfun={this.getchildrendata}/> </div> ) }}export default up;
import react from 'react';class children extends react.component{ constructor(props){ super(props); this.state = { } } render(){ return ( <div> children <br /> <button onclick={() => {this.props.upfun("子组件数据")}}>run</button> </div> ) }}export default children;
五、父组件中通过refs获取子组件属性和方法import react from 'react';import children from './children';class up extends react.component { constructor(props){ super(props); this.state = { } } clickbutton = () => { console.log(this.refs.children); } render(){ console.log("render"); return( <div> up <children ref="children" msg="test"/> <button onclick={this.clickbutton}>click</button> </div> ) }}export default up;``````jsimport react from 'react';class children extends react.component{ constructor(props){ super(props); this.state = { title: "子组件" } } runchildren = () => { } render(){ return ( <div> children <br /> </div> ) }}export default children;```
【相关推荐：redis视频教程】
以上就是react中什么是父子组件的详细内容。