Блог

Я хочу объявить глобальную переменную внутри функции, а затем использовать ее вне функции. Я попытался поместить 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 components имеет встроенный объект состояния. Объект состояния — это место, где вы храните значения свойств, которые принадлежат компоненту. Когда объект состояния изменяется, компонент повторно отображает. Для получения дополнительной информации о методах жизненного цикла React ознакомьтесь с этим документом

 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;
  

Если вам действительно нужна ГЛОБАЛЬНАЯ переменная, вы можете использовать window объект и добавить к нему свойство. Я думаю, это доступно везде.

Вот так:

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

Но в целом это не рекомендуется

Не стоит определять глобальную переменную в react js, хотя самый простой способ определить глобальную переменную в React js — поместить ее в объект window. Внутри вашего компонента вы можете определить, как

 window.myGlobalVar = "I am a global var"; 
  

доступ к нему через

 window.myGlobalVar
  

В идеале, если вы хотите передавать данные от компонента к компоненту, вы можете использовать

контекст

или можно создать компонент более высокого порядка

Если ваше приложение сложное, вы также можете использовать redux