web-dev-qa-db-ja.com

ReactDOM Renderを使用してReactコンポーネントをレンダリングする方法

_Header (cshtml) 

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


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

Help.js (component)


}

私の目標は、ヘッダーにヘルプボタンを表示することです。

私は、IDのヘルプモーダル、およびコンポーネントのレンダリング・ヘルプボタンとdivタグを作成しました。私はReactDOM.render（.........）によるhelp.jsでの接続これら二つです。私はNPM実行DISTとDOTNET実行を行うには、ブラウザで見たとき、私は、ヘッダー上のボタンを見ることができませんでした。誰でも助けてください??

reactjsnpmreduxmaterial-uijsx
10
LOKI

ReactDOM.renderを呼び出していますwithin a Reactレンダリングされないコンポーネント。

ヘルプのために、クラス定義の外部でReactDOM renderを呼び出します

ボタンを画面にレンダリングするには：

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

それでおしまい。

混乱を避けるために、コンポーネントに意味のある名前を付けてください。両方のヘルプに名前を付けると、一方をもう一方にインポートしようとすると混乱する場合があります（この場合は不要です）。

ヘルプコンポーネントをapp.js/index.jsルートレベルコンポーネントにネストしたい場合は、要素をエクスポートする必要があるため、クラス宣言行は次のように変更されます。

export default class Help extends Component {

次に、親コンポーネントで、次のようなものをインポートする必要があります。

import Help from './components/Help';

更新：次のタイプがあることに気付きました：
import RaisedButton from 'material-ui/RaisedButon';
RaisedButtonに「t」がありません！

する必要があります：
import RaisedButton from 'material-ui/RaisedButton';

16
Pineda

ヘルプコンポーネントをエクスポートする必要があります

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;

HelpComponentをレンダリングするためにReactコンポーネントを作成する必要はありません

Helppage.js

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

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