web-dev-qa-db-ja.com

反応のグローバル変数

こんにちは皆さん、私はまだ反応するのが初めてで、グローバル変数の使用方法がわかりません。 「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,
};
javascriptreactjsglobal-variables
5
alpheonix

それはひどい考えですが、おそらくReactでグローバル変数を使用する最良/最も簡単な方法は、windowに置くことです。コンポーネントでは、次のようなことができますwindow.topicText="some text"その後、window.topicText他のどこでも。

理想的には、データがあり、場合によってはコンポーネント間で永続化する必要があると思われる場合は、 Redux または Flux のようなものを調べる必要があります。 Reduxが好きです。

9
Gregg

これを試すことができます：メインコンポーネントApp.jsの前にグローバル変数を宣言し、この変数をツリーの小道具として渡します。

Parent.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
}
0
AlbertS

App.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);
}
0
kai_onthereal