javascript - 如何使用 ReactDOM Render 渲染 React 组件

Question

_Header (cshtml) 

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


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

Help.js (component)


}

我的目标是在标题上呈现帮助按钮。

我创建了带有 id help-modal 的 div 标签，以及组件渲染帮助按钮。我在 help.js 中连接这两个 通过 ReactDOM.render(.........); 当我执行 npm run dist 和 dotnet run 并查看浏览器时我看不到 header 上的按钮。任何人都可以帮忙解决这个问题吗？？

Answer 1

您在一个未渲染的 React 组件内调用 ReactDOM.render。

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

导出默认类Help扩展组件{

然后在您的父组件中，您需要使用以下内容导入它:

从“./components/Help”导入帮助；

更新:刚刚注意到有一种类型:
从 'material-ui/RaishedButon' 导入 RaisingButton；
RaisingButton 中缺少“t”!

应该是:
从“material-ui/RaishedButton”导入RaishedButton；