如何在 React 中访问孩子的状态？

在 React 中，我们可以使用 Refs 访问孩子的状态。我们将在父组件中为子组件分配一个 Refs。然后使用 Refs 我们可以访问孩子的状态。

创建 Refs Refs 使用 React.createRef() 创建并通过 ref 属性附加到 React 元素。

class App extends React.Component {
constructor(props) {
 super(props);
 //creating ref
 this.childRef= React.createRef();
}
render() {
 return (
 //assigning the ref to child component
 
 )
}
}

访问 Refs当我们将 ref 分配给渲染中的元素或子组件时，我们可以使用 ref 的 current 属性访问该元素。

const element = this.myRef.current;

同样，我们可以使用父组件的 element.state.state_name 访问状态。

创建一个反应应用程序并将App.js文件编辑为：

文件路径-src/App.js

Javascript

import React from "react";
import Child from './Child'
  
class App extends React.Component {
  constructor(props) {
    super(props);
    this.ChildElement = React.createRef();
  }
  handleClick = () => {
    const childelement = this.ChildElement.current;
      alert("current state of child is :  "+ childelement.state.name);
    childelement.changeName("Aakash");
      
      
  };
  render() {
    return (
      

        
        Show real name
      
    );
  }
}
export default App

在 src 文件夹中创建一个新的Child.js组件并进行如下编辑：

文件路径-src/Child.js：

Javascript

import React from 'react'
class Child extends React.Component {
  state = {
    name: "Batman"
  };
  changeName = (newname ) => {
    this.setState({
      name:newname
    });
  };
  render() {
    return 
{this.state.name}
;
  }
}
export default Child

输出：