如何在反应中将状态从一个类组件转移到另一个类组件？

Question

我是 React 新手，我正在尝试制作一个 CV 应用程序。 我在 PersonalData.js 中有一个表单，当我点击“提交 btn”时，类的状态会更新值。 我想将此状态从 PersonalData.js 传递到 Header.js。在文档中，我找到了将其发送到主 App.js 但不发送到不同的类组件的方法。

这就是我的 App.js 的样子：

function App() {
  return (
    <div className="App">
      <Header />
    <main>
    <Router>
        <Navbar />
        <Routes>
          <Route path="/" exact element={<PersonalData/>} /> //i want the state from here to go to <Header />
          <Route path="/aboutMe" element={<AboutMe/>} />
          <Route path="/profesional" element={<Profesional/>} />
          <Route path="/education" element={<Education/>} />
          <Route path="/skills" element={<Skills/>} />
          <Route path="/attachments" element={<Attached/>} />
        </Routes>
      </Router>
    </main>
    </div>
  );
}

标头代码：

export default class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: null,
    };
    this.onImageChange = this.onImageChange.bind(this);
    this.hiddenFileInput = React.createRef(null);
  }

  onImageChange = (event) => {
    if (event.target.files && event.target.files[0]) {
      let img = event.target.files[0];
      this.setState({
        image: URL.createObjectURL(img),
      });
    }
  };

  handleClick = (event) => {
    this.hiddenFileInput.current.click();
  };

  render() {
    return (
      <div className="headerGrid">
        <div className="addPhotoButton" onClick={this.handleClick}>
          <i className="fa-solid fa-circle-plus"></i>
          <input
            type="file"
            name="myImage"
            onChange={this.onImageChange}
            ref={this.hiddenFileInput}
            style={{ display: "none" }}
          />
        </div>
        <img className="headerElem" src={this.state.image} alt="" />

        <div className="headerElem">
          <h2>Full Name</h2>
          <p>Current ocupation</p>
          <div>
            <span>Location</span>
            <span>Age</span>
            <span>Sex</span>
          </div>
        </div>
        <div className="headerElem">
          <div>
            <i className="fa-solid fa-envelope"></i>
            <span>Email adress</span>
          </div>
          <div>
            <i className="fa-solid fa-phone"></i>
            <span>Telephone number</span>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

您可以通过将状态提升到应用程序组件来共享。

  function App() {
      const [details,setDetails] = React.useState({
         fullName : "yourName"
         currenOcupation: "React Dev",
         location : "inVirtualDom",
         age:23,
          gender: "male",
          mail: "[email protected]",
          phone : 123456789,          })
      return (
        <div className="App">
          <Header details={details} />
        <main>
        <Router>
            <Navbar />
            <Routes>
              <Route path="/" exact element={<PersonalData details={details}/>} /> //i want the state from here to go to <Header />
              <Route path="/aboutMe" element={<AboutMe/>} />
              <Route path="/profesional" element={<Profesional/>} />
              <Route path="/education" element={<Education/>} />
              <Route path="/skills" element={<Skills/>} />
              <Route path="/attachments" element={<Attached/>} />
            </Routes>
          </Router>
        </main>
        </div>
      );
    }

Answer 2

你可以看看React文档中的Context：
https://reactjs.org/docs/context.html