it-swarm.com.de

wie wird eine Reakt-Komponente mit ReactDOM Render gerendert?

_Header (cshtml) 

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


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

Help.js (component)


}

Mein Ziel ist es, eine Hilfeschaltfläche im Header anzuzeigen.

Ich habe ein div-Tag mit der ID help-modal und eine Komponente zum Rendern von Komponenten der Komponente ____ erstellt. Ich verbinde diese beiden in help.js von ReactDOM.render (.........); Wenn ich npm renne, lasse dist und dotnet laufen und sehe den Browser Ich konnte die Schaltfläche in der Kopfzeile nicht sehen. Kann jemand dazu bitte helfen?

6
LOKI

Sie rufen ReactDOM.render within eine React-Komponente an, die nicht gerendert wird.

Rufen Sie das ReactDOM-Rendering außerhalb der Klassendefinition auf, um Hilfe zu erhalten

So rendern Sie Ihre Schaltfläche auf dem Bildschirm:

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

Das ist es.

Um Verwirrung zu vermeiden, sollten Sie versuchen, Ihren Komponenten sinnvolle Namen zu geben. Beide benennen Die Hilfe kann verwirrend sein, wenn Sie versuchen, eine in eine andere zu importieren (was in diesem Fall nicht erforderlich ist).

Wenn Sie die Hilfekomponente tatsächlich in einer Stammebenenkomponente "app.js/index.js" verschachteln möchten, muss das Element exportiert werden, sodass die Klassendeklarationszeile folgendermaßen geändert wird:

export default class Help extends Component {

dann müssen Sie sie in Ihrer übergeordneten Komponente mit folgendem importieren:

import Help from './components/Help';

UPDATE: Habe gerade bemerkt, dass es einen Typ gab mit:
import RaisedButton from 'material-ui/RaisedButon';
Es fehlt ein "t" in RaisedButton!

sollte sein:
import RaisedButton from 'material-ui/RaisedButton';

9
Pineda

Sie müssen die Hilfekomponente exportieren

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;

Sie müssen keine React-Komponente erstellen, um die HelpComponent zu rendern

Helppage.js

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

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