Показать/скрыть компоненты ReactJS, не потеряв их внутреннего состояния?

Ответ 1

Один из вариантов - переместить условное выражение внутри самого компонента:

Bio = React.createClass({
    render: function() {
        if(this.props.show) {
            return <p>bio comp</p>
        } else {
            return null;
        }
    }
});

<Bio show={isBioPage} />

Является ли это "лучшей практикой" или нет, возможно, зависит от конкретной ситуации.

Ответ 2

К сожалению, трюк style={{display: 'none'}} работает только с обычным элементом DOM, а не с компонентом React. Я должен обернуть компонент внутри div. Поэтому мне не нужно каскадировать состояние в подкомпонент.

<div className="content">
  <div className={this.state.curTab == 'securities' ? 'active' : ''}>
    <Securities />
  </div>
  <div className={this.state.curTab == 'plugins' ? 'active' : ''}>
    <Plugins />
  </div>
</div>

Ответ 3

Похоже, официальная документация предлагает скрывать детей с состоянием с style={{display: 'none'}}

Ответ 4

Основная проблема здесь заключается в том, что в React вам разрешено монтировать компонент только его родительскому элементу, что не всегда является желаемым поведением. Но как решить эту проблему?

Я предлагаю решение, адресованное для устранения этой проблемы. Более подробное определение проблемы, src и примеры можно найти здесь: https://github.com/fckt/react-layer-stack#rationale

Обоснование

react/react-dom поставляется с двумя основными предположениями/идеями:

• каждый пользовательский интерфейс является естественным. Вот почему мы имеем идею components, которые обертывают друг друга
• react-dom по умолчанию монтирует (физически) дочерний компонент в родительский DOM node

Проблема в том, что иногда второе свойство не то, что вы хотите в твоем случае. Иногда вы хотите подключить свой компонент в различные физические DOM node и провести логическое соединение между родитель и ребенок одновременно.

Канонический пример - это компонент, подобный подсказке: в какой-то момент процесс разработки, вы можете обнаружить, что вам нужно добавить некоторые описание для вашего UI element: оно будет отображаться на фиксированном уровне и должен знать свои координаты (которые заключаются в том, что UI elementмышь), и в то же время ему нужна информация о том, должен быть показан прямо сейчас или нет, его содержание и некоторый контекст из родительских компонентов. Этот пример показывает, что иногда логическая иерархия не соответствует физической иерархии DOM.

Взгляните на https://github.com/fckt/react-layer-stack/blob/master/README.md#real-world-usage-example, чтобы увидеть конкретный пример, который отвечает на ваш вопрос (посмотрите на "использование", имущество):

import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
  const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
  return (
    <Cell {...props}>
        // the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
        <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
            hideMe, // alias for `hide(modalId)`
            index } // useful to know to set zIndex, for example
            , e) => // access to the arguments (click event data in this example)
          <Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
            <ConfirmationDialog
              title={ 'Delete' }
              message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
              confirmButton={ <Button type="primary">DELETE</Button> }
              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
              close={ hideMe } />
          </Modal> }
        </Layer>

        // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
        <LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
          <div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
            <Icon type="trash" />
          </div> }
        </LayerContext>
    </Cell>)
// ...