La commutation entre les composants de Réagir JS

Je veux créer un flux simple, avec 2 composants. La première composante est rendu, je clique sur un bouton et l'action de rendre le deuxième composant. En cliquant sur le bouton à partir de la deuxième composante, il devrait revenir à la première, mais au lieu de cela, une erreur s'est produite:

Avertissement: Réagir.createElement: type ne doit pas être null, undefined,
booléen, ou le nombre. Il devrait être une chaîne de caractères (pour les éléments du DOM) ou un
ReactClass (pour les composants composites). Vérifier la méthode de rendu de
exports.avertissement @ réagir.js:20728ReactElementValidator.createElement
@ réagir.js:9853t.les exportations.De réagir.createClass.rendu @
bundle.js:1ReactCompositeComponentMixin._renderValidatedComponentWithoutownerorcontext
@ réagir.js:6330ReactCompositeComponentMixin._renderValidatedComponent
@ réagir.js:6350wrapper @
de réagir.js:12868ReactCompositeComponentMixin._updateRenderedComponent @
de réagir.js:6303ReactCompositeComponentMixin._performComponentUpdate @
de réagir.js:6287ReactCompositeComponentMixin.updateComponent @
de réagir.js:6216wrapper @
de réagir.js:12868ReactCompositeComponentMixin.performUpdateIfNecessary @
de réagir.js:6164ReactReconciler.performUpdateIfNecessary @
de réagir.js:13667runBatchedUpdates @ réagir.js:15356Mixin.effectuer @
de réagir.js:17245Mixin.effectuer @ réagir.js:17245assign.effectuer @
de réagir.js:15313flushBatchedUpdates @ réagir.js:15374wrapper @
de réagir.js:12868Mixin.closeAll @ réagir.js:17311Mixin.effectuer @
de réagir.js:17258ReactDefaultBatchingStrategy.batchedUpdates @
de réagir.js:8842batchedUpdates @
de réagir.js:15321ReactEventListener.dispatchEvent @ réagir.js:10336
de réagir.js:20250

Erreur non interceptée: l'Invariant de Violation: type d'Élément n'est pas valide:
une chaîne de caractères (pour les composants intégrés) ou de classe/fonction (pour les composites
les composants) mais j'ai reçu: de l'objet. Vérifier la méthode de rendu de
exports.invariant @ réagir.js:20250instantiateReactComponent @
de réagir.js:18268ReactCompositeComponentMixin._updateRenderedComponent @
de réagir.js:6312ReactCompositeComponentMixin._performComponentUpdate @
de réagir.js:6287ReactCompositeComponentMixin.updateComponent @
de réagir.js:6216wrapper @
de réagir.js:12868ReactCompositeComponentMixin.performUpdateIfNecessary @
de réagir.js:6164ReactReconciler.performUpdateIfNecessary @
de réagir.js:13667runBatchedUpdates @ réagir.js:15356Mixin.effectuer @
de réagir.js:17245Mixin.effectuer @ réagir.js:17245assign.effectuer @
de réagir.js:15313flushBatchedUpdates @ réagir.js:15374wrapper @
de réagir.js:12868Mixin.closeAll @ réagir.js:17311Mixin.effectuer @
de réagir.js:17258ReactDefaultBatchingStrategy.batchedUpdates @
de réagir.js:8842batchedUpdates @
de réagir.js:15321ReactEventListener.dispatchEvent @ réagir.js:10336

Première composante:

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

Deuxième Composante:

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

pas besoin d'ajouter que tout message d'erreur et vous pouvez également nettoyer votre question pour être plus précis, sinon personne ne peut vous aider.

OriginalL'auteur user5512965 | 2015-12-03

Vous ne jamais appeler ReactDOM.render() lorsque vous installez l'application. Une fois monté, vous n'appelez jamais ReactDOM.render() de nouveau sur le même point de montage. [*voir la mise à jour ci-dessous.]

Rappelez-vous que votre vue est en fonction de vos accessoires et de l'état. Pour changer votre point de vue, déclencher un changement d'état.

Je suggère quelque chose comme ceci:

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

     }

});

Et de faire le Parent du nœud racine. c'est à dire

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

Mise à JOUR: depuis, j'ai appris que vous peut appel ReactDOM.render() plusieurs fois sur le même point de montage. Ce serait généralement dans le même endroit où vous l'initialisation de l'application. Néanmoins, vous n'avez certainement pas appel ReactDOM.render() à l'intérieur de Réagir composant.

OriginalL'auteur David L. Walsh

dans la fonction rendu opérateur ternaire sera remplacé tout simplement et la réponse va être:

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

Reste sera de même.

OriginalL'auteur DilipCoder

Vous devez vous connecter pour publier un commentaire.