Как избежать управления состоянием в вызывающем компоненте, а также в повторно используемом компоненте?

Question

В React я создал многократно используемый компонент, который для краткости управляет своим собственным состоянием (открыто / закрыто). Давайте назовем это Panel.

У меня есть другой компонент, который использует этот компонент панели, назовем его Bob. После вызова API я хотел бы вызвать Panel (открыть панель).

Действительно ли мне нужно управлять состоянием в Bob (вызывающем компоненте) для того, должна ли панель открываться и передавать ее как реквизиты? Конечно, есть способ управлять состоянием ТОЛЬКО в Panel, предоставляя метод из Panel.

Вот что я делал: Боб управляет состоянием: shouldOpen: boolean;

КогдаБобу нужно открыть панель: this.setState ({shouldOpen: true});

<Panel
  shouldOpen={this.state.shouldOpen}
/>

Панель имеет отдельное состояние {isOpen: false}

Что бы я хотел сделать,это выставить метод в Panel, который может быть вызван из Боба. Это избавит от необходимости управлять состоянием как в Bob, так и в Panel. Так что, когда я вызываю API, я могу позвонить openPanel

public openPanel = () => {
  this.setState({isOpen: true});
}
public closePanel = () => {
  this.setState({isOpen: false});
}

Я ищу ПРАВИЛЬНЫЙ способ сделать это. Если это означает, что мне нужно структурировать свой код по-другому, пожалуйста, предоставьте руководство. Для меня просто имеет смысл, что панель должна управлять своим собственным открытым / закрытым состоянием.

Answer 1

В React вы часто обнаруживаете, что повторно используемый компонент предлагает интерфейс через реквизит, например, в вашем случае isOpen in Panel. Тем не менее, ваш компонент Panel не должен хранить что-либо в своем состоянии и должен использовать this.props, если это компонент, который «контролируется» его родителем, как в вашем случае - это совершенно нормально и хороший код, так что не делайте »не беспокойтесь об этом.

Чтобы ответить на другую часть вашего вопроса: да, можно вызывать методы для вашего компонента Panel с помощью React.createRef, см. Как получить доступ к методам компонента «извне». ”В ReactJS? .