Javascript 将函数传递给多个子对象

我正在尝试构建一个应用程序来帮助我学习反应。这是一个简单的应用程序，用户输入位置，从谷歌地理定位api获取坐标，然后使用dark skys api获取该位置的天气条件

我最初将所有应用程序逻辑放在一个容器中，您可以在这里看到

我想把我的逻辑分开一点，因为我觉得我的一个容器做了太多的事情。我希望我的应用程序结构如下

App.js-保存状态、locationChangeHandler函数以传递给LocationSearchContainer

LocationSearchContainer-地理位置API并调用LocationSearch以显示搜索栏

WeatherContainer-WeatherAPI并调用WeatherComponent来呈现显示

我相信这可以更好地分离关注点，并使代码更具可读性

由于这种结构，我想我的App.js中需要一个locationChangeHandler，它将被传递到Dump LocationSearch组件。这将我的App.js与搜索栏紧密结合，但由于这是应用程序的核心功能，我认为这不是问题

我遇到的问题是如何从App.js->LocationSearchContainer->LocationSearch传递我的处理程序。以下是我迄今为止的拙劣尝试：

在App.js中，我有

handleLocationChange = e => {
    e.preventDefault();
        console.log('hello');

        //Calls getLocation in LocationSearchContainer and updates state
}

render(){
    return (
            <LocationSearchContainer onLocationChange={this.handleLocationChange} />
    )
}

handleLocationChange=e=>{
e、 预防默认值（）；
log（'hello'）；
//调用LocationSearchContainer中的getLocation并更新状态
}
render（）{
返回(
)
}

在LocationSearchContainer中，我有以下内容：

import React from 'react';
import LocationSearch from '../components/LocationSearch';


class LocationSearchContainer extends React.Component{

    getLocation = (address) => {

        //DO STUFF

    }

    render(){

        return (
            <LocationSearch onLocationChange={this.props.handleLocationChange} />
        )

    }

}

export default LocationSearchContainer;

从“React”导入React；
从“../components/LocationSearch”导入LocationSearch；
类LocationSearchContainer扩展React.Component{
getLocation=（地址）=>{
//做事
}
render（）{
返回(
)
}
}
导出默认位置SearchContainer；

最后是LocationSearch：

import React from 'react';

const LocationSearch = (
            <form onSubmit={props.onLocationChange}>
                <div className="input-group">
                    <input type="text" name="location" className="form-control" placeholder="Search location..." />
                    <button className="btn btn-primary">Go!</button>
                </div>
            </form>
)

export default LocationSearch;

从“React”导入React；
const LocationSearch=(
走！
)
导出默认位置搜索；

如何正确地传递此处理程序

完成上述工作后，我还需要从App.js调用SearchLocationContainer中的getLocation，但我也不知道该怎么做

编辑

我已经解决了问题的第一部分。我按名称调用函数，而不是传递的道具名称。所以在LocationSearchContainer的render（）函数中，我应该

return (
        <LocationSearch onLocationChange={this.props.handleLocationChange} />
    )

返回(
)

而不是我原来的

---

这仍然给我留下了从App.js文件调用LocationSearchContainer的getCoordinates函数的问题。有人能帮我吗？

你这样通过你的处理程序：

<LocationSearchContainer onLocationChange={this.handleLocationChange} />

<LocationSearch onLocationChange={this.props.onLocationChange} />

最后，您需要在

LocationSearch

中使用它作为

props.onLocationChange

---

对于第二个问题，您不应该尝试从父组件调用子组件的方法。改变你的逻辑。将此函数保留在父组件中，然后将其作为道具再次传递给子组件，或者将逻辑移动到子组件。

他可以使用refs来实现第二部分，尽管这将是一个非常糟糕的做法，但确实很糟糕：）