详解react里面的父子组件是什么？
导读：在这篇文章中，我们将学习“详解react里面的父子组件是什么？”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。 在react组件的相互调用中，把调用者称为父组件，被调...
在这篇文章中，我们将学习“详解react里面的父子组件是什么？”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。在react组件的相互调用中，把调用者称为父组件，被调用者称为子组件。父子组件间可以传值：1、父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值；2、子组件向父组件传值时，需要通过触发方法来传递给父组件。
本教程操作环境：Windows7系统、react18版、Dell G3电脑。
一、React中的组件
react组件就是自己定义的非html标签，规定react组件首字母大写：
class App extends Component{
}
App />
二、父子组件
组件的相互调用中，把调用者称为父组件，被调用者称为子组件：
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 />
/div>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
div>
Children
/div>
)
}
}
export default Children;
三、父组件给子组件传值
父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。
父组件在调用子组件的时候定义一个属性：
Children msg="父组件传值给子组件" />
这个值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;
```
```js
import 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;
```
感谢各位的阅读，以上就是“详解react里面的父子组件是什么？”的内容了，通过以上内容的阐述，相信大家对详解react里面的父子组件是什么？已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 详解react里面的父子组件是什么？
本文地址： https://pptw.com/jishu/653837.html