如何在ReactJS中的函数中声明全局变量？

如何解决如何在ReactJS中的函数中声明全局变量？

我想在函数内部声明一个全局变量，然后在函数外部使用它。我尝试将JSX放入函数中，以便可以轻松访问它，但是由于渲染器返回null，因此无法正常工作。

APP.JS：

class App extends React.Component {
  render() {
    firebase
      .database()
      .ref()
      .limitToLast(1)
      .on('child_added',function (childSnapshot) {
        var snap = childSnapshot.val();
        var category = snap.category;
        var condition = snap.condition;
        var postname = snap.postname;
        var postprice = snap.postprice;
        var username = snap.username;
        var usernumber = snap.usernumber;
        var imageURL = snap.imageURL;
        var postdescription = snap.postdescription;
        var whatsapplink = 'https://wa.me/' + usernumber + '?text=';
      });
    return (
      <>
        <div></div>
        <div style={{float: 'left'}}>
          <Ads
            imageURL={imageURL}
            name={postname}
            price={postprice}
            category={category}
            condition={condition}
            description={postdescription}
            username={username}
            usernumber={usernumber}
            whatsapplink={whatsapplink}
          />
        </div>
      </>
    );
  }
}

export default App;

我应该编写一个函数从渲染器的firebase中获取数据吗？

ADS.JS：

import React from 'react';
import '../App.css';

class ads extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.image} alt="image"></img>
        <h2>{this.props.name}</h2>
        <h2>{this.props.price}</h2>
        <h2>{this.props.category}</h2>
        <h2>{this.props.condition}</h2>
        <h2>{this.props.description}</h2>
        <h2>{this.props.username}</h2>
        <a href={this.props.whatsapplink}>
          <button>Chat with Seller</button>
        </a>
      </div>
    );
  }
}

export default ads;

解决方法

反应组件具有内置状态对象。状态对象是您存储属于组件的属性值的位置。当状态对象更改时，组件将重新渲染。有关React Go Through this doc

的生命周期方法的更多信息

import React from 'react';
import firebase from 'firebase'
import './App.css'
import Ads from './component/ads.js'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            category: '',condition: '',postname: '',postprice: '',username: '',usernumber: '',imageURL: '',postdescription: '',whatsapplink: ''
        }
    }
    componentDidMount() {
        firebase.database().ref().limitToLast(1).on('child_added',(childSnapshot) => {
            var snap = childSnapshot.val();
            this.setState({
                category: snap.category,condition: snap.condition,postname: snap.postname,postprice: snap.postprice,username: snap.username,usernumber: snap.usernumber,imageURL: snap.imageURL,postdescription: snap.postdescription,whatsapplink: "https://wa.me/" + snap.usernumber + "?text=",})
        })
    }
    render() {
        const { category,condition,postname,postprice,username,usernumber,imageURL,postdescription,whatsapplink } = this.state
        return (
            <>
                <div></div>
                <div style={{ float: "left" }}>
                    <Ads
                        category={category}
                        condition={condition}
                        name={postname}
                        price={postprice}
                        username={username}
                        usernumber={usernumber}
                        imageURL={imageURL}
                        description={postdescription}
                        whatsapplink={whatsapplink} />

                </div>
            </>
        )
    }
}

export default App;

,

如果您确实需要GLOBAL变量，则可以使用window对象并向其添加属性。我想它随处可见。

赞：

const myFunction = value => {
    window["newprop"] = value
}

但是总的来说，不推荐