如何使用ReactDOM Render渲染React组件

  • Z时代
  • 2024-01-10
  • 分类：问答

_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时，看到浏览器我没看到标题上的按钮。请问对此有何帮助？

回答：

您呼叫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';

以上是 如何使用ReactDOM Render渲染React组件 的全部内容， 来源链接： utcz.com/qa/415379.html

回到顶部