web-dev-qa-db-fra.com

comment rendre un composant de réaction en utilisant ReactDOM Render

_Header (cshtml) 

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


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

Help.js (component)


}

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

J'ai créé une balise div avec id help-modal et un bouton d'aide pour le rendu des composants Je suis la connexion ces deux dans help.js par ReactDOM.render (.........); quand je fais npm run dist et dotnet run, et que je vois le navigateur .__, je ne pouvais pas voir le bouton en-tête Quelqu'un peut-il aider à ce sujet s'il vous plaît?

reactjsnpmreduxmaterial-uijsx
6
LOKI

Vous appelez ReactDOM.render au sein de un composant React qui n’est pas rendu.

Appelez ReactDOM en dehors de la définition de classe pour obtenir de l'aide.

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

C'est tout.

Pour éviter toute confusion, essayez d’attribuer des noms significatifs à vos composants. Nommer les deux Aide peut être source de confusion lorsque vous essayez d'importer une unité dans une autre (ce qui dans ce cas n'est pas nécessaire).

Si vous souhaitez en effet imbriquer le composant Aide dans un composant de niveau racine app.js/index.js, il est nécessaire d'exporter l'élément pour que la ligne de déclaration de la classe soit modifiée comme suit:

export default class Help extends Component {

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

import Help from './components/Help';

UPDATE: Vient de remarquer 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';

9
Pineda

Vous devez exporter le composant d'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 composant React pour rendre le HelpComponent

Helppage.js 

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

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