时间戳

首页 > 解决方案 > 调用另一个组件内部的方法 - React Js

javascript - 调用另一个组件内部的方法 - React Js

问题描述

我需要知道如何通过调用第一个组件内部的第二个组件方法从其他组件获取组件的状态？喜欢 ：

class General extends Component {
    
  state = {
    input:"
   }
   
   fetchState() {
    return this.state;
   }

  handleChange () {
    this.setState({[e.target.name]: e.traget.value});
  }
  
  render() {
    return <input type="text" name="input" onChange={this.handleChange.bind(this}>
  }
  
}


class Car extends Component {
   
  render() {
    console.log( General.fetchState() );
    return null;
  }
  
}

我知道我可以使用静态方法，但我无权访问此关键字。

标签： javascriptreactjs

解决方案

做这种事情的推荐方法是组合组件并将父级的状态作为道具传递

class General extends Component {
  state = { ... }

  render () {
    return (
      <Car {...this.state} />
    )
  }
}

class Car extends Component {
  render () {
    console.log(this.props)
    return (...)
  }
}

现在，如果您想在组件之间共享全局状态context api，使用hooks.

import React, { createContext, useContext } from "react";
import ReactDom from "react-dom";

const initialState = { sharedValue: "Simple is better" };
const StateContext = createContext({});

const General = () => {
  const globalState = useContext(StateContext);
  return <h1>General: {globalState.sharedValue}</h1>;
};

const Car = () => {
  const globalState = useContext(StateContext);
  return <h1>Car: {globalState.sharedValue}</h1>;
};

const App = () => {
  return (
    <StateContext.Provider value={initialState}>
      <General />
      <Car />
    </StateContext.Provider>
  );
};

ReactDom.render(
  <App />,
  document.getElementById("root")
);

这是示例链接。

在这里，我有一个 repo，其中包含一个更详细的示例，它只使用钩子来管理全局状态。

推荐阅读