Reactで小道具として機能を渡すには？

Question

私は機能コンポーネントGetWeatherを持っています。GetLocation関数の結果を、GetWetaherが別のget要求（下の例ではその小道具のみをレンダリングする）を行うための基礎となる小道具として渡したいとします。私はそれがComponentDidMount内部で起こることがあると思いますが、わからないそれを行う方法を

は

function GetLocation() { 
     axios.get('http://ipinfo.io') 
      .then((res) => {  
      return res.data.loc; 
      }) 

     } 
    function GetWeather(props) { 
    //more code here, including another get request, based on props 
     return <h1>Location: {props.location}</h1>;  
    } 

    class LocalWeather extends Component {   
     componentDidMount() {  
     //???  
     }   
     render() { 
     return (
      <div >       
       <GetWeather location={GetLocation}/> //???            
      </div> 
     ); 
     } 
    } 

更新：ので、下記の私のため

function GetWeather(props) { 
    return <h3>Location: {props.location}</h3>; 
} 

class LocalWeather extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     location: [] 
    }; 
    } 
    getLocation() { 
    axios.get('http://ipinfo.io') 
     .then((res) => {  
     this.setState({location:res.data.loc});   
     })   
    } 

    componentDidMount() {  
    this.getLocation();  

    } 
    render() { 
    return (
     <div >      
      <GetWeather location={this.state.location}/>             
     </div> 
    ); 
    } 
} 

Answer 1

を働いているダミアンからの提案に基づいて、あなたはまた、代わりにそれを行うことができます

constructor() 
    { 

     super(); 

     this.state= 
     { 
     Location:[] 


     } 

    } 
    function GetLocation() { 
     axios.get('http://ipinfo.io') 
      .then((res) => { 
this.setState ({  
      Location:res.data.loc; 
}) 
      }) 

     } 
    function GetWeather(props) { 

     return <h1>Location: {this.props.location}</h1>;  
    } 

    class LocalWeather extends Component {   
     componentDidMount() {  
     //???  
     }   
     render() { 
     return (
      <div >       
       <GetWeather location={this.GetLocation.bind(this)}/>            
      </div> 
     ); 
     } 
    }