react的全局变量

IT技术 javascript reactjs global-variables
2021-04-17 14:20:55

我不知道，如何使用全局变量。

我想让“this.props.topic.text”成为一个全局变量，以便在我项目的其他应用程序上使用它。我怎样才能做到这一点？

export default class Topic extends Component {

  deleteThisTopic() {
    Topics.remove(this.props.topic._id);
  }

  test() {
  
  }
  render() {
    return (

      <Router>
    <div>
      <ul>
        <Link to="/sub"><li onClick={this.test.bind(this)}>{this.props.topic.text}  ARN:  {this.props.topic.arn}</li></Link>
        <Link to="/log"><button onClick={this.test.bind(this)}>S'inscrire</button></Link>
        <Link to="/"><button >Cacher</button></Link>
        <button onClick={this.deleteThisTopic.bind(this)}>Suprimer</button>
      </ul>

      <hr/>
      <Route exact path="/log" component={AppInscription}/>
      <Route exact path="/sub" component={AppSub}/>


    </div>
  </Router>
  );
  }
}

Topic.propTypes = {

  topic: PropTypes.object.isRequired,
};

4个回答

这是一个糟糕的主意，但在 React 中使用全局变量的最好/最简单的方法可能是将它放在window. 在组件中，您可以执行类似操作window.topicText="some text"，然后通过window.topicText其他任何地方访问它。

理想情况下，如果您有数据，并且在您的情况下可能是状态，您需要从一个组件到另一个组件持久化，您应该查看Redux或Flux 之类的东西。我更喜欢 Redux。

@Tom Fenech 这是唯一的缺点吗？因为使用“window”似乎有点诱人。如果是这样，你能更具体吗？为什么这是个坏主意？谢谢=)
2021-05-23 14:20:55
它运作良好。你能解释一下为什么这是个坏主意吗？
2021-06-02 14:20:55
@alpheonix 为什么仅仅因为您在少数地方需要它而拥有一个对您的应用程序中的所有内容都可以读/写访问的变量不是一个坏主意？
2021-06-07 14:20:55
是的。@TomFenech 所说的。
2021-06-10 14:20:55
@Andri 关于我反对使用全局变量的建议，没有任何 React-甚至 JS 特定的内容-您会在该站点上找到许多讨论该主题的好答案。另见softwareengineering.stackexchange.com/questions/148108/...
2021-06-20 14:20:55

你可以试试这个：在你的主要组件 App.js 之前声明你的全局变量，并将这个变量作为 props 传递到树下。

父.js

var myVar = {}

class MyComponent extends Component {

...
...
myVar = new Object();
...
...
render() {
   return <div>
                 \\ children
                 <MyLeftBranch myVar={myVar} />
                 <MyRightBranch myVar={myVar} />
              </div>
}
}

export default MyComponent;

child.js

class Child extends Component {
     { myVar } = this.props;
     \\use myVar
}

应用程序.js

// Since this.state is global from parent to child components
// This was the easiest solution I've found:

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

class App extends Component
 constructor(props) {
     super(props);

     // Set the key to the reference name
     // Assign value to firebase DB collection

     this.state = {
         roomsRef: firebase.firestore().collection("rooms")
     }
}

// reference it anywhere in the component:

componentDidMount() {
    this.getDb(this.state.roomsRef);
}

TypeScript + globalThis

//@ts-ignore TODO cleanup this debug output
globalThis.MY_NAMESPACED_NAME = { something: 'to inspect in the console' }

对于生产代码来说是个坏主意，但对调试很有用。

其它你可能感兴趣的问题
上一篇在 React 组件中使用 setInterval 下一篇Redux - 如何调用一个动作并等待它被解决