Question

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

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;
  }
  
}

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

Answer 1

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

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")
);

这里是example link。

还有here，我有一个仓库，上面有一个更详细的示例，它仅用钩子管理全局状态。

Answer 2

在当前代码中，唯一的方法是使用new General。

console.log(new General().fetchState());

Answer 3

如果您希望将Car组件用作General组件的父代，则只需使用 ref 。这是我测试过的您修改后的代码：

import React from "react";

class General extends React.Component { 
    constructor () {
        super();   
        this.state = {input: ""}
        this.handleChange = this.handleChange.bind(this);
    }   

    fetchState() {
        return this.state;
    }

    handleChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    render() {
        return <input type="text" name="input" onChange={this.handleChange} />
    }
}

export default class Car extends React.Component {   
    constructor () {
        super();
        this.refToGeneral = React.createRef()
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        console.log(this.refToGeneral.current.fetchState())
    }

    render() {
        return ( 
            <>
               <General ref={this.refToGeneral} />
               <button type="button" onClick={this.handleClick}>Show State</button>
            </>
        )
    }  
}

Answer 4

有很多方法，我建议使用从两个组件均可访问的一般状态。

检查ReactN是否简单，或者检查Redux是否更可靠。注意Redux的学习曲线很大，并且有很多样板，根据应用程序的大小，可能没有必要。

在许多情况下，建议不要使用全局变量，但是要回答您的问题，您也可以这样做：

常规组件：

class General extends Component {
    constructor(){
        global.fetchGeneralState = this.fetchState;
    }
    fetchState = () => {
        return this.state;
    }
}

然后从 Car 组件中，只需调用：global.fetchGeneralState();，您将从 General 组件中获取状态。

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

4 个答案: