当您从基于类的组件切换到基于函数的组件时,公共方法的替代方法是什么?

你可以把可缩放变成一个完全受控的组件。然后父组件将需要管理其缩放级别和位置。

const ZoomableUI = ({place}) => {
    const [mapState, setMapState] = React.useState(place)

    React.useEffect(() => {
        setMapState(place)
    }, [place])

    return (
        <div>
            <Zoomable state={mapState} setState={setMapState} />
            <button onClick={() => setMapState(place)}>
                Re-Center
            </button>
        </div>
    )
}

我看到的另一种可能性是把这个地方当作道具。可缩放的可能有一个内部 useEffect key 使其刷新状态。

const ZoomableUI = ({place}) => {
    const [counter, setCounter] = React.useState(0)
    return (
        <div>
            <Zoomable place={place} key={counter} />
            <button onClick={() => setCounter((counter) => counter + 1)}>
                Re-Center
            </button>
        </div>
    )
}