React18 常见问题

子组件访问父组件值

使用 Props 传递

// ParentComponent.jsmport React, { Component } from 'react';
import ChildComponent from "./ChildComponent";

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      parentValue: "Parent Value",
    };
  }

  parentMethod = () => {
    alert("Parent method called from Child Component");
  };

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent callParentMethod={this.parentMethod} />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js
import React, { Component } from "react";

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <h1>Child Component</h1>
        <button onClick={this.props.callParentMethod}>Call Parent Method</button>
      </div>
    );
  }
}

export default ChildComponent;

子组件调用父组件方法

使用 bind

// ParentComponent.js
import React, { Component } from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello from Parent",
    };

    // 绑定方法
    this.handleChildClick = this.handleChildClick.bind(this);
  }

  handleChildClick() {
    this.setState({ message: "Child component clicked!" });
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <ChildComponent onChildClick={this.handleChildClick} />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js
import React, { Component } from "react";

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onChildClick}>Click Me</button>
      </div>
    );
  }
}

export default ChildComponent;

父组件访问子组件值

使用 Ref

// ParentComponent.js

import React, { Component } from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childValue: "",
    };
    this.childRef = React.createRef();
  }

  componentDidMount() {
    if (this.childRef.current) {
      this.setState({ childValue: this.childRef.current.getValue() });
    }
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <p>Child Value: {this.state.childValue}</p>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js

import React, { Component } from "react";

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childValue: "Child Value",
    };
  }

  getValue = () => {
    return this.state.childValue;
  };

  render() {
    return (
      <div>
        <h1>Child Component</h1>
        <p>{this.state.childValue}</p>
      </div>
    );
  }
}

export default ChildComponent;

父组件调用子组件方法

使用 Ref

// ParentComponent.js

import React, { Component } from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildMethod = () => {
    if (this.childRef.current) {
      this.childRef.current.childMethod();
    }
  };

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <button onClick={this.callChildMethod}>Call Child Method</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js

import React, { Component } from "react";

class ChildComponent extends Component {
  childMethod = () => {
    alert("Child method called from Parent Component");
  };

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    );
  }
}

export default ChildComponent;