Переключение между компонентами в React JS

Question

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

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of exports .warning @ react.js:20728ReactElementValidator.createElement @ react.js:9853t.exports.React.createClass.render @ bundle.js:1ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ react.js:6330ReactCompositeComponentMixin._renderValidatedComponent @ react.js:6350wrapper @ react.js:12868ReactCompositeComponentMixin._updateRenderedComponent @ react.js:6303ReactCompositeComponentMixin._performComponentUpdate @ react.js:6287ReactCompositeComponentMixin.updateComponent @ react.js:6216wrapper @ react.js:12868ReactCompositeComponentMixin.performUpdateIfNecessary @ react.js:6164ReactReconciler.performUpdateIfNecessary @ react.js:13667runBatchedUpdates @ react.js:15356Mixin.perform @ react.js:17245Mixin.perform @ react.js:17245assign.perform @ react.js:15313flushBatchedUpdates @ react.js:15374wrapper @ react.js:12868Mixin.closeAll @ react.js:17311Mixin.perform @ react.js:17258ReactDefaultBatchingStrategy.batchedUpdates @ react.js:8842batchedUpdates @ react.js:15321ReactEventListener.dispatchEvent @ react.js:10336 react.js:20250

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of exports .invariant @ react.js:20250instantiateReactComponent @ react.js:18268ReactCompositeComponentMixin._updateRenderedComponent @ react.js:6312ReactCompositeComponentMixin._performComponentUpdate @ react.js:6287ReactCompositeComponentMixin.updateComponent @ react.js:6216wrapper @ react.js:12868ReactCompositeComponentMixin.performUpdateIfNecessary @ react.js:6164ReactReconciler.performUpdateIfNecessary @ react.js:13667runBatchedUpdates @ react.js:15356Mixin.perform @ react.js:17245Mixin.perform @ react.js:17245assign.perform @ react.js:15313flushBatchedUpdates @ react.js:15374wrapper @ react.js:12868Mixin.closeAll @ react.js:17311Mixin.perform @ react.js:17258ReactDefaultBatchingStrategy.batchedUpdates @ react.js:8842batchedUpdates @ react.js:15321ReactEventListener.dispatchEvent @ react.js:10336

Первый компонент:

/** @jsx React.DOM */ 

var Second = require('components/second/view.jsx'); 

module.exports = React.createClass({ 

handlerClick: function() { 
    ReactDOM.render(
     <Second />, 
     document.getElementById("app-container") 
    ) 
}, 

render: function() { 
    return (
    <input type="button" value="COMPONENT 1" onClick={this.handlerClick} /> 
) 
} 
}); 

Второй компонент:

/** @jsx React.DOM */ 

var First = require('components/first/view.jsx'); 

module.exports = React.createClass({ 

handlerClick: function() { 
    ReactDOM.render(
     <First />, 
     document.getElementById("app-container") 
    ) 
}, 

render: function() { 
    return (
    <input type="button" value="COMPONENT 2" onClick={this.handlerClick} /> 
) 
} 
}); 

index.js

ReactDOM.render(
    <div> 
     <First /> 
    </div>, 
    document.getElementById("app-container") 
); 

Answer 1

Когда вы монтируете приложение, вы всегда вызываете ReactDOM.render(). После установки вы никогда не вызываете ReactDOM.render() снова в той же точке монтирования. [* см. обновление ниже.]

Помните, что ваш взгляд является функцией вашего реквизита и состояния. Чтобы изменить свое представление, активируйте изменение состояния.

я предлагаю что-то вроде этого:

var Parent = React.createClass({ 

    getInitialState: function() { 
     return { 
      active: 'FIRST' 
     }; 
    }, 

    handleClick: function() { 
     var active = this.state.active; 
     var newActive = active === 'FIRST' ? 'SECOND' : 'FIRST'; 
     this.setState({ 
      active: newActive 
     }); 
    }, 

    render: function() { 

     var active = this.state.active; 

     return (
      <div> 
       {active === 'FIRST' ? (
        <First /> 
       ) : active === 'SECOND' ? (
        <Second /> 
       ) : null} 
       <button type="button" onClick={this.handleClick}> 
        Toggle 
       </button> 
      </div> 
     ); 

    } 

}); 

И сделать Родитель корневой узел. т.е.

ReactDOM.render(<Parent />, document.getElementById('app-container')); 

UPDATE: Я с тех пор узнал, вы можете вызов ReactDOM.render()multiple times on the same mount point. Обычно это будет в том же месте, в котором вы инициализируете приложение. Тем не менее, вы, конечно, не вызываете ReactDOM.render() изнутри компонента React.