如何使用ReactDOM Render渲染反应组件

Question

_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运行dist和dotnet运行,并看到浏览器我看不到标题上的按钮.有人可以帮忙吗？

Answer 1

您在 React组件中调用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';