Можно ли Показать / Скрыть элемент в родителе без повторной перенастройки?

Пожалуйста, поправьте меня, если мой мыслительный процесс отличается от ортодоксальности React.js..

У меня есть родитель< MainViewController />, у которого есть <View />ребенок.

Если событие прокрутки происходит в my<View />, то я хочу показать / скрыть кнопку в моем родителе < MainViewController />.

К сожалению, прямо сейчас, я делаюsetState, чтобы переключиться, но он повторно отправляет родителя, и, следовательно, всех своих детей. В основном, он сбрасывает все мое приложение. Есть ли более простой способ переключать Скрыть / показать без повторной настройки?

Мой соответствующий код :

var MainViewController = React.createClass({
  getInitialState () {
    return {
      showAskQuestion: false,
    };  
  },
  toggleFloatingButton () {
    this.setState({
      showAskQuestion: !this.state.showAskQuestion
    });
  },
    render () {
        return (
            <Container>
                <UI.NavigationBar name="main" />
        <UI.Button type="info" className={ this.state.showAskQuestion ? '' : 'hidden' } >
          Ask A Question
        </UI.Button>      
                <ViewManager name="main" defaultView="tabs">
                    <View name="tabs" component={TabViewController} toggleFloatingButton={this.toggleFloatingButton} />
                </ViewManager>
            </Container>
        );
    }
});

1 ответ

  1. Основная идея React заключается в том, что когда что-то меняется в компоненте, он перерисовывает весь компонент. Чтобы это не было ужасно медленным, React только отображает его до виртуального представления DOM, затем проверяет виртуальный DOM против реального и делает минимальное количество изменений, чтобы получить их в синхронизации.

    При обновлении состояния в компоненте React создаст виртуальное представление, но оно будет почти идентично реальному DOM. Единственным отличием является следующий атрибут:

    className={ this.state.showAskQuestion ? '' : 'hidden'}
    

    Единственная часть «фактического» рендеринга React будет делать, это обновление этого атрибута.