javascript - 将函数传递给多个子ReactJS

Question

我正在尝试构建一个应用程序来帮助我学习 React。这是一个简单的应用程序，它接受用户输入位置，从 google 地理定位 api 获取坐标，然后使用 dark skys 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，但我也不知道该怎么做？

编辑

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

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

而不是我原来的。

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

Answer 1

您正在这样传递您的处理程序:

<LocationSearchContainer onLocationChange={this.handleLocationChange} />

因此，在 LocationSearchContainer 组件中，处理函数的名称为 onLocationChange，在 props 中为 this.props.onLocationChange。

因此，您需要将此函数传递给您的 LocationSearch 组件，如下所示:

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

最后，您需要在 LocationSearch 中将其用作 props.onLocationChange

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