Question

我正在学习reactjs，并且被困在另一个组件中调用函数。

我做到了：

import moment from 'moment';
import WeatherLocation from './../components/WeatherLocation'


const transformForecast = datos =>(
    datos.list.filter(item => (

        moment.unix(item.dt).utc().hour() === 6 ||
        moment.unix(item.dt).utc().hour() === 12 ||
        moment.unix(item.dt).utc().hour() === 18
    )).map(item => (
        {
            weekDay: moment.unix(item.dt).format('ddd'),
            hour: moment.unix(item.dt).hour(),
            data: WeatherLocation.getDatos(item)
        } 
    ))
);

export default transformForecast;

getDatos是WeatherLocation中的一个函数，我导出了WeatherLocation，但我不知道该调用是否正确。

WeatherLocation组件：

const api_key = "bb7a92d73a27a97e54ba00fab9d32063";


class WeatherLocation extends Component{

constructor({ city }){
    super();
    this.state = {
        city,
        primero: null
    }

}

getWeatherState = weather => {
    const { id } = weather[0];

    if (id < 300){
        return THUNDER;
    }else if (id < 400){
        return DRIZZLE;
    }else if (id < 600){
        return RAIN;
    }else if (id < 700){
        return SNOW;
    }else if (id >= 800){
        return SUN;
    }else{
        return CLOUDY;
    }
};

getTemp = kelvin =>{
    return convert(kelvin).from('K').to('C').toFixed(2);
}
getDatos = (weather_data) =>{

    const {weather} = weather_data;
    const {humidity, temp} = weather_data.main;
    const {speed} = weather_data.wind;
    const weatherState = this.getWeatherState(weather);
    const temperature = this.getTemp(temp);

    const primero = {
        humidity,
        temperature,
        weatherState,
        wind: `${speed}`,
    }
    return primero;
};


componentWillMount() {
    this.handleUpdateClick();
}


handleUpdateClick = () => {
    const {city} = this.state;
    const urlTiempo = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`;

    fetch(urlTiempo).then(primero => {
        return primero.json();
    }).then(weather_data => {
        const primero = this.getDatos(weather_data);
        this.setState({primero});
    });
};


render = () => {
   const {onWeatherLocationClick} = this.props;
    const {city, primero} = this.state;
   return (
    <div className='weatherLocationCont' onClick = {onWeatherLocationClick}>

        <Location city={city}/>
        {primero ? <WeatherData datos = {primero}/> : <CircularProgress size={60} thickness={7} />}

    </div>);
};
}
WeatherLocation.propTypes = {
    city: PropTypes.string.isRequired,
    onWeatherLocationClick: PropTypes.func
}

export default WeatherLocation;

如您所见，我想重用getDatos，因为我需要在transformForecast中使用这些变量。

谢谢您的帮助，谢谢。

Answer 1

WeatherLocation是一个React组件，而不是普通的JS对象，因此您不能随便调用它的内部函数：因为只有一个类定义，所以没有什么可调用的，您需要一个实例。

因此，您需要在页面/ UI中创建一个实际的<WeatherLocation.../>组件，然后使用WeatherLocation的文档化API根据组件的更改获取其数据，并将其传递给任何对象正在调用transformForecast函数。

Answer 2

在这里不允许

Object.Method（）调用。您需要创建一个React有状态或无状态组件，并从父组件传递支持给它。让我们说，WeatherLocation是您的父组件，transformForecast是子组件。您可以执行以下操作在WeatherLocation组件中调用您的方法。

父项：

class WeatherLocation extends React.Component {
    constructor(props) {
        super(props);
            this.state = {
            datos: []
        };
        this.getDatos = this.getDatos.bind(this);
    };

    getDatos = (item) => {
        console.log(item);
    };
    render() {
        return (
            <div> 
                <TransformForecast 
                    getDatos={this.getDatos}
                    datos={this.state.datos}
                />
            </div>
        )
    }
}

export default WeatherLocation;

子组件：

const TransformForecast = (props) => {
 return (
    props.datos.list.filter(item => (

        moment.unix(item.dt).utc().hour() === 6 ||
        moment.unix(item.dt).utc().hour() === 12 ||
        moment.unix(item.dt).utc().hour() === 18
    )).map(item => (
        {
            weekDay: moment.unix(item.dt).format('ddd'),
            hour: moment.unix(item.dt).hour(),
            data: props.getDatos(item)
        } 
    ))
);
};

export default TransformForecast;

注意：此代码可能不是立即可用的代码，因为我不确定数据和API的调用。这仅仅是为了说明解决您的问题。希望这会有所帮助。

从其他文件中调用组件中的函数

2 个答案: