javascript - 如何从另一个组件 react 调用/执行方法/函数

Question

我想知道是否可以从另一个组件调用或执行方法或函数。

我想异步运行 tableInformacion.js 函数，该函数有一个请求 get，但在调用 post 之后code> 请求是我在 address.js 中发出的。

地址.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import request from 'superagent';
import {getSolarDayInformation} from './tableInformation.js';

import '../styles/main.css';

class AddressInput extends Component{

    constructor(){    
        super();
        this.state = {
            address: "",
            api:"http://maps.google.com/maps/api/geocode/json?address=",
            direccion: "",
            latitud: "",
            longitud:""          
        };
    } 

    render(){
        return(
            <div> 

                <form>      

                    <input type="text" 
                           value={this.state.address} 
                           onChange={this.updateAdress.bind(this)}
                           placeholder="Escriba la direccion"/>

                    <button onClick={this.getAddressGeo.bind(this)}>Consultar</button> 
                </form>

                <ul className="None-Style">
                    <li><label>Direccion:</label>{this.state.direccion}</li>
                    <li><label>Latitud:{this.state.latitud}</label></li>
                    <li><label>Longitud:{this.state.longitud}</label></li>
                </ul>
            </div> 
        )
    }

    updateAdress(event){
        this.setState({
            address: event.target.value
        });
    }

    getAddressGeo(e){

        e.preventDefault();
        const apiUrl = this.state.api + this.state.address;

        request.post(apiUrl).then((res) => {

            const direccionCompleta = res.body.results[0].formatted_address; 
            const Latitud = res.body.results[0].geometry.location.lat;
            const Longitud = res.body.results[0].geometry.location.lng;             

           this.setState({
                direccion: direccionCompleta,
                latitud: Latitud, 
                longitud: Longitud
            })

        })
        .catch((err) => {
            console.log(err.message);
        });

        getSolarDayInformation();

    } 
}

export default AddressInput;

tableInformacion.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import request from 'superagent';

class TableConsumeInformation extends Component{

    constructor(){
        super();
        this.state = {
            apiSolarInformation: 'https://asdc-arcgis.larc.nasa.gov/cgi-bin/power/v1beta/DataAccess.py?request=',
            parameters:'execute&identifier=SinglePoint&parameters=ALLSKY_SFC_SW_DWN&',
            startDate:'0101&',
            endDate:'1231&',
            comunity: 'userCommunity=SSE&tempAverage=DAILY&outputList=JSON,ASCII&',
            latitudePlace:'lat=',
            longitudePlace:'&lon=',
            anonymous:'&user=anonymous'
        };
    }

    render(){
        return(
            <div>
                <h2>Information Energy</h2>
                <table></table>
            </div>
        );
    }

    getSolarDayInformation(){
        apiSolarUrl = 'https://asdc-arcgis.larc.nasa.gov/cgi-bin/power/v1beta/DataAccess.py?request=execute&identifier=SinglePoint&parameters=ALLSKY_SFC_SW_DWN&startDate=20170101&endDate=20171231&userCommunity=SSE&tempAverage=DAILY&outputList=JSON,ASCII&lat=11.373&lon=-72.253&user=anonymous';
        request.get(apiSolarUrl).then((req, res) => {
            console.log(res.body);
        });
    }

}

export default TableConsumeInformation;

Answer 1

我假设您在这种情况下谈论的是 getSolarDayInformation 函数。

在你的例子中，看起来最简单的事情是将你的函数重构到它自己的文件中并将其导入到它需要的所有地方。它没有理由成为对象方法，因为它不依赖于对象状态。