如何使用ReactDOM Render渲染React组件

小编典典

如何使用ReactDOM Render渲染React组件

reactjs

_Header (cshtml)

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


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

Help.js (component)


}

我的目标是在标题上显示一个帮助按钮。

我已经创建了id为help-
modal的div标签，以及一个组件渲染帮助按钮。我通过ReactDOM.render（.........）在help.js中连接这两个；当我做npm
run dist和dotnet run时，看到浏览器我没看到标题上的按钮。请问对此有何帮助？

阅读 513

2020-07-22

共1个答案

小编典典

您呼叫ReactDOM.render 内一个阵营组件没有得到呈现。

在类定义之外调用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根级组件中，则有必要导出该元素，因此将对类声明行进行如下修改：

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

2020-07-22