Какая альтернатива методам publi c при переходе от компонентов React на основе классов к функциям?

Question

Реагирующие компоненты, использующие хуки, не могут быть основаны на классах; они должны быть основаны на функциях. Есть кое-что, что я делал в компонентах на основе классов, но я не уверен, как выполнить sh в компонентах на основе функций: вызов метода для дочернего компонента.

Контекст, в котором это происходит для Я в компонентах, которые действуют как карта, или как документ фотошопа. У них часто есть способ увеличения масштаба до определенной области c, а также позволяющий пользователю свободно перемещаться после этого.

Можно создать такой компонент <Zoomable>, чтобы сохранить внутреннее состояние относительно того, где он был увеличен. , но предоставьте метод c publi zoomTo(place).

Можно использовать компонент Zoomable, например, так:

const ZoomableUI = ({place}) => {
    const zoomable = React.useRef(null)

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

    return (
        <div>
            <Zoomable ref={zoomable} />
            <button onClick={() => zoomable.current.zoomTo(place)}>
                Re-Center
            </button>
        </div>
    )
}

Этот компонент вызывает масштабирование Zoomable до места, когда он первый рендеринга или когда свойство place изменяется, но пользователь может потом свободно перемещаться вокруг себя. Затем они могут перецентрировать его на текущем месте, нажав кнопку.

Конечно, ничего из этого не будет работать, если Zoomable был реализован как компонент на основе функций. Как бы вы реализовали систему такого типа с помощью карты на основе функций?

Какая альтернатива для предоставления методов publi c при переключении на компоненты React на основе функций?

Кстати, дон Не советую ставить кнопку внутри Zoomable. Его цель - служить примером поведения, которое может исходить из любого места приложения, не обязательно где-то в DOM.

Answer 1

Вы можете превратить Zoomable в полностью контролируемый компонент. Тогда родительский компонент должен будет управлять уровнем масштабирования и положением.

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>
    )
}

Еще одна возможность, которую я вижу, - передать это место в качестве опоры. Zoomable может иметь внутренний useEffect, который будет увеличивать его до места, когда место изменилось. Это не будет работать для кнопки, так как кнопка не меняет реквизит. Я мог бы поставить счетчик в key реквизит Zoomable, чтобы заставить его обновить sh его состояние.

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>
    )
}