在React JS中切换组件

我想用2个组件创建一个简单的流程.第一个组件被渲染,我点击它上面的一个按钮,这个动作渲染第二个组件.单击第二个组件中的按钮,它应切换回第一个组件,但发生错误:

警告:React.createElement:type不应为null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).检查exports.warning @ react.js 的render方法 :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 @反应. 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:8842batchedUpdat es @ react.js:15321ReactEventListener.dispatchEvent @ react.js:10336 react.js:20250

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.检查exports.invariant @ react.js 的render方法 :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(
        ,
        document.getElementById("app-container")
    )
},

render: function() {
  return (
    
  )
}
});

第二部分:

/** @jsx React.DOM */

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

module.exports = React.createClass({

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

render: function() {
  return (
    
  )
}
});

Index.js

ReactDOM.render(
    

        
    
,
    document.getElementById("app-container")
);

David L. Wal.. 7

您只能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 (
            

                {active === 'FIRST' ? (
                    
                ) : active === 'SECOND' ? (
                    
                ) : null}
                
                    Toggle
                
            
        );

     }

});

并使Parent成为根节点.即

ReactDOM.render(, document.getElementById('app-container'));

更新:我已经知道你可以ReactDOM.render() 在同一个挂载点上多次调用.这通常与您初始化应用程序的位置相同.不过,你当然不会ReactDOM.render()从React组件内部调用.

您只能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 (
            

                {active === 'FIRST' ? (
                    
                ) : active === 'SECOND' ? (
                    
                ) : null}
                
                    Toggle
                
            
        );

     }

});

并使Parent成为根节点.即

ReactDOM.render(, document.getElementById('app-container'));

更新:我已经知道你可以ReactDOM.render() 在同一个挂载点上多次调用.这通常与您初始化应用程序的位置相同.不过,你当然不会ReactDOM.render()从React组件内部调用.