将函数传递给多个孩子reactJS

Question

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

我最初将所有应用程序逻辑放在一个容器中，您可以在此处查看 https://github.com/darragh3277/night-sky

我想进一步分离我的逻辑，因为我觉得我的一个容器做了太多事情。我希望按如下方式构建我的应用程序。

App.js - 保存状态，locationChangeHandler 函数传递给 LocationSearchContainer。

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

WeatherContainer - WeatherAPI 并调用 Wea​​ther 组件来呈现显示。

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

由于这种结构，我认为我的 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} />
    )
}

在 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;

最后是位置搜索：

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;

如何正确传递这个处理程序？

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

编辑

我已经解决了我的问题的第一部分。我通过名称而不是我传递的道具名称来调用函数。所以在我的 LocationSearchContainer 的 render() 函数中我应该有

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

而不是我原来的。

这仍然给我留下了从 App.js 文件中调用 LocationSearchContainer 的 getCoordinates 函数的问题。任何人都可以帮助我吗？

Answer 1

你正在像这样传递你的处理程序：

<LocationSearchContainer onLocationChange={this.handleLocationChange} />

所以，在LocationSearchContainer 组件中，您的处理函数的名称是onLocationChange，在道具中它是this.props.onLocationChange。

所以，你需要像这样将这个函数传递给你的LocationSearch 组件：

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

最后，您需要在LocationSearch 中使用它作为props.onLocationChange

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