如何使用 ReactDOM Render 渲染一个 React 组件

Question

_Header (cshtml) 

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


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

Help.js (component)


}

我的目标是在页眉上呈现一个帮助按钮。

我创建了 div 标签，id 为 help-modal ，还有一个组件渲染帮助按钮。我正在连接 help.js 中的那两个通过 ReactDOM.render(.........); 当我执行 npm 运行 dist 和 dotnet 运行并查看浏览器时我看不到 header 上的按钮。有人可以帮忙吗？？

Answer 1

您需要导出帮助组件

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;

并且无需创建 React 组件来呈现 HelpComponent

Helppage.js

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

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

Answer 2

您正在 ReactDOM.render 中调用 一个未呈现的 React 组件。

在 class 定义之外调用 ReactDOM 渲染以获得帮助

将您的按钮渲染到屏幕上：

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 可能会造成混淆。

如果您确实想在 app.js/index.js 根级组件中嵌套帮助组件，则需要导出该元素，因此需要修改 class 声明行如下：

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

如何使用 ReactDOM Render 渲染一个 React 组件

how to render a react component using ReactDOM Render

javascript

jsx

npm

reactjs

material-ui