Javascript 反应的全局变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45080011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Global variable for react
提问by alpheonix
Hi guys I'm still new to react and i don't know, how to use global variable. I want to make "this.props.topic.text" a global variable to use it on an other app of my project. how can i do that ?
大家好，我还是个新手，我不知道如何使用全局变量。我想让“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,
};回答by Gregg
It is a terrible idea, but probably the best/easiest way to use a global variable in React is to put it on the window. In a component you could do something like window.topicText="some text"and then access it via window.topicTexteverywhere else.
这是一个糟糕的主意，但在 React 中使用全局变量的最好/最简单的方法可能是将它放在window. 在组件中，您可以执行类似操作window.topicText="some text"，然后通过window.topicText其他任何地方访问它。
Ideally, if you have data, and in your case likely state, that you need to persist from component to component, you should look into something like Reduxor Flux. I prefer Redux.
理想情况下，如果您有数据，并且在您的情况下可能是状态，您需要从一个组件到另一个组件持久化，您应该查看Redux或Flux 之类的东西。我更喜欢 Redux。
回答by AlbertS
You can try this: Declare your global variable before your main component App.js and pass this variable as props down the tree.
你可以试试这个：在你的主要组件 App.js 之前声明你的全局变量，并将这个变量作为 props 传递到树下。
Parent.js
父.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
孩子.js
class Child extends Component {
{ myVar } = this.props;
\use myVar
}
回答by kai_onthereal
App.js
应用程序.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);
}
