0

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

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

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

4

4 回答 4

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

这是示例链接。

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

于 2019-05-29T13:44:30.847 回答
1

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

检查ReactN是否简单，或检查Redux以获得更强大的解决方案。注意 Redux 有一个很大的学习曲线和相当多的样板，根据你的应用程序的大小，它可能不是必需的。

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

通用组件：

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

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

于 2019-05-29T13:48:40.163 回答
0

如果您希望使用 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>
            </>
        )
    }  
}
于 2019-08-31T12:45:40.773 回答
0

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

console.log(new General().fetchState());
于 2019-05-29T12:30:45.913 回答