Umschalten zwischen Komponenten Reagieren JS

Ich möchte erstellen Sie eine einfache Durchfluss -, mit 2-Komponenten. Die erste Komponente gerendert wird, habe ich auf eine Taste und diese Aktion machen die zweite Komponente. Klicken Sie auf die Schaltfläche aus der zweiten Komponente, es sollte, schalten Sie zurück auf die erste, sondern, ein Fehler ist aufgetreten:

Warnung: Reagieren.createElement: - Typ sollte nicht null sein, undefined,
boolean oder number. Es sollte ein string sein (für DOM-Elemente) oder eine
ReactClass (für composite-Bauteile). Überprüfen Sie die render-Methode von
exports.Warnung @ reagieren.js:20728ReactElementValidator.createElement
@ reagieren.js:9853t.die Exporte.Reagieren.createClass.render @
bundle.js:1ReactCompositeComponentMixin._renderValidatedComponentWithoutownerorcontext
@ reagieren.js:6330ReactCompositeComponentMixin._renderValidatedComponent
@ reagieren.js:6350wrapper @
reagieren.js:12868ReactCompositeComponentMixin._updateRenderedComponent @
reagieren.js:6303ReactCompositeComponentMixin._performComponentUpdate @
reagieren.js:6287ReactCompositeComponentMixin.updateComponent @
reagieren.js:6216wrapper @
reagieren.js:12868ReactCompositeComponentMixin.performUpdateIfNecessary @
reagieren.js:6164ReactReconciler.performUpdateIfNecessary @
reagieren.js:13667runBatchedUpdates @ reagieren.js:15356Mixin.führen @
reagieren.js:17245Mixin.durchführen, @ reagieren.js:17245assign.führen @
reagieren.js:15313flushBatchedUpdates @ reagieren.js:15374wrapper @
reagieren.js:12868Mixin.closeAll @ reagieren.js:17311Mixin.führen @
reagieren.js:17258ReactDefaultBatchingStrategy.batchedUpdates @
reagieren.js:8842batchedUpdates @
reagieren.js:15321ReactEventListener.dispatchEvent @ reagieren.js:10336
reagieren.js:20250

Nicht abgefangener Fehler: Invariant Violation: Element-Typ ist ungültig: erwartete
ein string (für den integrierten Komponenten) oder eine Klasse/Funktion (für composite
Komponenten) aber habe: - Objekt. Überprüfen Sie die render-Methode von
exports.invariante @ reagieren.js:20250instantiateReactComponent @
reagieren.js:18268ReactCompositeComponentMixin._updateRenderedComponent @
reagieren.js:6312ReactCompositeComponentMixin._performComponentUpdate @
reagieren.js:6287ReactCompositeComponentMixin.updateComponent @
reagieren.js:6216wrapper @
reagieren.js:12868ReactCompositeComponentMixin.performUpdateIfNecessary @
reagieren.js:6164ReactReconciler.performUpdateIfNecessary @
reagieren.js:13667runBatchedUpdates @ reagieren.js:15356Mixin.führen @
reagieren.js:17245Mixin.durchführen, @ reagieren.js:17245assign.führen @
reagieren.js:15313flushBatchedUpdates @ reagieren.js:15374wrapper @
reagieren.js:12868Mixin.closeAll @ reagieren.js:17311Mixin.führen @
reagieren.js:17258ReactDefaultBatchingStrategy.batchedUpdates @
reagieren.js:8842batchedUpdates @
reagieren.js:15321ReactEventListener.dispatchEvent @ reagieren.js:10336

Erste Komponente:

/** @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} />
  )
}
});

Zweite Komponente:

/** @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")
);

keine Notwendigkeit, fügen Sie die ganze Fehlermeldung angezeigt, und Sie können auch reinigen Sie Ihre Frage konkreter sein, sonst kann niemand helfen.

InformationsquelleAutor user5512965 | 2015-12-03

Du nur immer rufen ReactDOM.render() beim bereitstellen der Anwendung. Einmal montiert, Sie nie rufen Sie ReactDOM.render() immer wieder auf die gleichen mount-Punkt. [*siehe update unten].

Denken Sie daran, dass Ihre Ansicht ist eine Funktion der Requisiten und Staat. Um die Ansicht zu ändern, auslösen, die eine änderung des Status.

Ich schlage vor, so etwas wie dieses:

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>
        );

     }

});

Machen und die Eltern den root-Knoten. also

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

UPDATE: ich habe gelernt, da Sie kann nennen ReactDOM.render() mehrmals auf die gleichen mount-Punkt. Dies würde in der Regel werden in der gleichen Ort, den Sie initialisieren der Anwendung. Dennoch, Sie sind sicherlich nicht nennen ReactDOM.render() innerhalb Reagieren Komponente.

InformationsquelleAutor David L. Walsh

in der render-Funktion ternäre operator wird Sie einfach ersetzt werden und die vollständige Antwort wie:

    /** @jsx React.DOM */

    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 /> }
                    <button type="button" onClick={this.handleClick}>
                        Toggle
                    </button>
                </div>
            );

         }
    });


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

Rest wird gleich sein.

InformationsquelleAutor DilipCoder

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.