[解決済み] ReactDOM Renderを使用してリアクトコンポーネントをレンダリングする方法

質問

_Header (cshtml) 

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


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

Help.js (component)


}

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

idがhelp-modalのdivタグを作成しました。 コンポーネントは、ヘルプボタンをレンダリングします。この2つをhelp.jsで接続しています。 をReactDOM.render(......................)で接続しています。 npm run dist と dotnet run をして、ブラウザを見ると、以下のように表示されます。 ヘッダーにボタンが表示されない。誰かこの上で助けてください？

解決方法は？

ReactDOM.renderを呼び出しています。 内の レンダリングされない 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')        
);

以上です。

混乱を避けるために、コンポーネントに意味のある名前を付けるようにしてください。 Helpという名前は、一方をもう一方にインポートしようとしたときに混乱する可能性があります（この場合は必要ありません）。

もし本当に Help コンポーネントを app.js/index.js のルートレベルのコンポーネントにネストさせたい場合は、要素をエクスポートする必要があるので、クラス宣言の行を次のように修正します。

export default class Help extends Component {

というように、親コンポーネントでインポートする必要があります。

import Help from './components/Help';

UPDATE という型があることに気づきました。
import RaisedButton from 'material-ui/RaisedButon';
RaisedButtonの't'が抜けている!

であるべきです。
import RaisedButton from 'material-ui/RaisedButton';