comment rendre une réagir composant à l'aide de ReactDOM Rendu

_Header (cshtml) 

<div id="Help"></div>


export default class Help {
    ReactDOM.render(     
           <Help/>,
           document.getElementById('Help')        
        );
}

Help.js (component)


}

Mon but est de rendre un bouton d'aide sur l'en-tête.

J'ai Créé balise div avec l'id de l'aide-modale , et un
composant de rendu bouton d'aide. Je suis à la connexion de ces deux-là en help.js
par ReactDOM.rendre(.........);
quand je fais mnp exécuter dist et dotnet exécuter , et de voir le navigateur
Je ne pouvais pas voir le bouton en-tête . Quelqu'un peut-il aider svp ??

  • En êtes-vous des erreurs dans la console? pouvez-vous vérifier lorsque vous laod la page qui Help-modal div existe réellement?
  • Pas d'erreurs dans la console... quand je l'inspecter en-tête, c'est juste que la balise div (pas de bouton)
  • Downvote. C'est littéralement sur la première page de facebook.github.io/réagir
InformationsquelleAutor LOKI | 2016-11-03
  1. 16

    Vous appelez ReactDOM.rendre dans Réagir un composant qui n'est pas rendu.

    Appel ReactDOM rendre à l'extérieur de la définition de classe pour aider

    Pour rendre votre bouton à l'écran:

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

class Help extends Component {
  render() {
    return (
      <div>
        <RaisedButton label="Help"/> 
      </div>
    );
  }
}
ReactDOM.render(     
  <Help />,
  document.getElementById('Help-modal')        
);

    Que c'est.

    Pour éviter la confusion devriez essayer et donner à votre composants des noms significatifs. Nommage deux d'entre eux de l'Aide peut prêter à confusion lorsque vous essayez d'importer un à l'autre (qui dans ce cas n'est pas nécessaire).

    Si vous voulait nid à l'Aide de composants dans un app.js/index.js au niveau de la racine des composants, il serait nécessaire à l'exportation de l'élément, de sorte que la déclaration de classe de la ligne serait modifié comme suit:

    export default class Help extends Component {

    puis dans votre composant parent, vous devez l'importer avec quelque chose comme:

    import Help from './components/Help';

    Mise à JOUR:
    juste remarqué qu'il y avait un type avec:

    import RaisedButton from 'material-ui/RaisedButon';

    il manque un " t " dans RaisedButton!

    devrait être:

    import RaisedButton from 'material-ui/RaisedButton';

    • Je vous remercie de votre réponse, mais j'ai fait comme vous avez dit et je l'ai enlevé helppage.js . Pourtant, je ne pouvais pas voir le bouton sur l'écran
    • Ce n'est pas seulement à propos de la suppression helppage.js. ReactDOM.le rendu est appelée en dehors de la définition de la classe et reçoit le <Aide /> composant défini au-dessus d'elle. Il serait utile pour vous de ajouter comment vous testez ce ainsi que l'extension de votre fichier html.
    • importation de Réagir, { Component } à partir de 'réagir'; boîte de Dialogue d'importation de matériel-ui/boîte de Dialogue'; import FlatButton à partir d'un matériau-ui/FlatButton'; import RaisedButton à partir d'un matériau-ui/RaisedButon"; classe d'Aider extends Component { render() { return ( <div> <RaisedButton label="Aide"/> </div> ); } } ReactDOM.render(<Aide/a>,document.getElementById ("Aide-modal'));C'est ce que j'ai fait , Pouvez-vous me corriger si je me trompe??
    • Remarqué un manque d'importation (ReactDOM) et aussi un type avec RaisedButton. J'ai modifié ma réponse en conséquence.
    InformationsquelleAutor Pineda
  2. 2

    Vous devez exporter les Composant de l'Aide

    Help.js

    import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButon';

class Help extends Component {
    render() {
           return (
                <div>
                   <RaisedButton label="Help"/> 
                </div>
        );
    }
}

export default Help;

    Et pas besoin de créer un Réagir Composant de rendre la HelpComponent

    Helppage.js

    import HelpComponent from '../components/Help';
import ReactDOM from 'react-dom';

ReactDOM.render(     
       <HelpComponent/>,
       document.getElementById('Help-modal')        
    );
    InformationsquelleAutor Shubham Khatri