Question

我需要调用componentWillMount中的函数，但我不希望它位于同一个文件中。

有没有办法在componentWillMount中引用该函数？

以下是代码，我已经遗漏了很多与此问题无关的代码，因为我正在重构（因此这个问题！）：

Midpoint.js：

import React, { Component } from 'react';

class Midpoint extends Component {

  midpoint(lat1, lng1, lat2, lng2) {
    const rad = (Math.PI) / 180;
    const rlat1 = lat1 * rad;
    const rlng1 = lng1 * rad;
    const rlat2 = lat2 * rad;
    const rlng2 = lng2 * rad;

    const dlng = rlng2 - rlng1;
    const Bx = Math.cos(rlat2) * Math.cos(dlng);
    const By = Math.cos(rlat2) * Math.sin(dlng);

    const lat3 = Math.atan2(Math.sin(rlat1) + Math.sin(rlat2),
              Math.sqrt(((Math.cos(rlat1) + Bx) * (Math.cos(rlat1) + Bx)) + (By * By)));
    const lng3 = rlng1 + Math.atan2(By, (Math.cos(rlat1) + Bx));

    const lat = (lat3 * 180) / Math.PI;
    const lng = (lng3 * 180) / Math.PI;
    this.setState({ lat2: lat, lng2: lng });
  }
}

export default Midpoint;

这是我要导入到下面的函数：

ResultsPage.js：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import getDirections from 'react-native-google-maps-directions';
import axios from 'axios';
import Midpoint from './Midpoint';
import { Card, CardSection, Button } from './common';

class ResultsPage extends Component {
  state = {}

  componentWillMount() {
.then(response => { Midpoint.midpoint(this.state.p1Latitude, this.state.p1Longitude, this.state.p2Latitude, this.state.p2Longitude) })

}

我收到的错误是_Midpoint2.default.midpoint is not a function

Answer 1

你试图调用一个组件，就像它是一个函数一样，如果Midpoint的唯一目标是计算latlng那么就不要让它成为React Component只是导出函数

    export default function calculateMidpoint(lat1, lng1, lat2, lng2) {
    const rad = (Math.PI) / 180;
    const rlat1 = lat1 * rad;
    const rlng1 = lng1 * rad;
    const rlat2 = lat2 * rad;
    const rlng2 = lng2 * rad;

    const dlng = rlng2 - rlng1;
    const Bx = Math.cos(rlat2) * Math.cos(dlng);
    const By = Math.cos(rlat2) * Math.sin(dlng);

    const lat3 = Math.atan2(Math.sin(rlat1) + Math.sin(rlat2),
              Math.sqrt(((Math.cos(rlat1) + Bx) * (Math.cos(rlat1) + Bx)) + (By * By)));
    const lng3 = rlng1 + Math.atan2(By, (Math.cos(rlat1) + Bx));

    const lat = (lat3 * 180) / Math.PI;
    const lng = (lng3 * 180) / Math.PI;
     return { lat, lng }
  }

但是如果Midpoint必须是一个组件，就像我们在上一个例子中那样提取逻辑并将它放在一个不同的文件中并在结果和中点组件中调用它

假设您将Utils.js中的函数放在同一目录中

ResultsPage.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import getDirections from 'react-native-google-maps-directions';
import axios from 'axios';
import calculateMidpoint from './Utils';
import { Card, CardSection, Button } from './common';

class ResultsPage extends Component {
  state = {}

  componentWillMount() {
let latlng = calculateMidpoint(this.state.p1Latitude, this.state.p1Longitude, this.state.p2Latitude, this.state.p2Longitude) 

}

和Midpoint.js

import React, { Component } from 'react';
import calculateMidpoint from './Utils';
class Midpoint extends Component {

  midpoint(lat1, lng1, lat2, lng2) {
    let latlng = calculateMidpoint(lat1, lng1, lat2, lng2)
    this.setState({ lat2: latlng.lat, lng2: latlng,lng });
  }
}

export default Midpoint;

另外，你在componentWillMount中有一个错误，你无处不在地调用.then（）

React Native：在componentWillMount

1 个答案: