javascript - 向子组件发送请求的最佳方式

Question

我正在创建一个地图应用程序，它包含一个显示 GeoJSON 标记的地图 (react-map-gl) 和一个列出相同标记属性的简单表格。

地图组件和表格组件都是公共组件（主 App 组件）的直接子组件。单击表格中的标记时，我希望地图组件缩放到该标记。

为了让地图开始过渡，我需要设置它的 state.viewport，如下例所示： https ://visgl.github.io/react-map-gl/docs/advanced/viewport-transition

如果您将该示例中的“纽约市”按钮移动到一个姊妹组件，那么您完全符合我的情况。

如何以“React 方式”从姊妹组件向地图组件发送地图转换请求？

标签： javascriptreactjs

Answer 1

React 的方式是有一个共同的父级来处理所有与状态相关的动作，即提升你的状态。这个想法是始终保持单一的事实来源，让它通过 props 沿着树向下走，并使用函数来更新状态。

在您的情况下，一个示例可能如下所示：

const defaultViewport = viewport: {
    width: 800,
    height: 600,
    longitude: -122.45,
    latitude: 37.78,
    zoom: 14,
}

// The app will handle the viewport and related update
const App = () => {
    const [viewport, setViewport]= useState(defaultViewport);

    const handleTransition = (transitionViewport) => {
        setViewport({
            ...viewport,
            ...transitionViewport
        });
    }

    const handleViewportChange = (newViewport) => {
        setViewport(newViewport);
    }

    return (
        <div>
            <Map 
                viewport={viewport}
                onViewportChange={handleViewportChange}
            />

            <Menu 
                onTransition={handleTransition}
            />
        </div>
    );
}

// The map only need to be aware of the viewport and how to change it
const Map = ({ viewport, onViewportChange }) => {
    return (
        <ReactMapGL 
            {...viewport} 
            onViewportChange={onViewportChange} 
        />
    );
}


// The menu only need to know how to request a transition
const Menu = ({onTransition}) => {
    const goToNYC = () => {
        const viewport = {
            longitude: -74.1,
            latitude: 40.7,
            zoom: 14,
            transitionDuration: 5000,
            transitionInterpolator: new FlyToInterpolator(),
            transitionEasing: d3.easeCubic
        };

        onTransition(viewport);
    }

    return (
        <div>
            <button onClick={goToNYC}>New York City</button>
        <div>
    );
}