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

【问题标题】：how to render a react component using ReactDOM Render如何使用 ReactDOM Render 渲染一个 React 组件
【发布时间】：2017-03-17 09:35:31
【问题描述】：

_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 上的按钮。有人可以帮忙吗？？

【问题讨论】：

您是否在控制台中遇到任何错误？你能在加载页面时验证Help-modal div 确实存在吗？
控制台中没有错误...当我检查标题时，它只是显示该 div 标签（无按钮）
投反对票。这确实在facebook.github.io/react的首页上

标签： javascript reactjs npm material-ui jsx

【解决方案1】：

你正在调用 ReactDOM.render within 一个没有被渲染的 React 组件。

在类定义之外调用 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 可能会让人感到困惑。

如果你确实想将 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';

【讨论】：

感谢您的回答，但我照您说的做了，并删除了 helppage.js 。尽管如此，我还是看不到屏幕上的按钮
这不仅仅是删除 helppage.js。 ReactDOM.render 在类定义之外被调用并接收上面定义的组件。添加测试方式以及扩展 html 文件对您很有帮助。
从'react'导入反应，{组件}；从“material-ui/Dialog”导入对话框；从“material-ui/FlatButton”导入 FlatButton；从“material-ui/RaisedButton”导入 RaisedButton； class Help extends Component { render() { return (

); } } ReactDOM.render(,document.getElementById('Help-modal'));这是我做的，如果我错了你能纠正我吗？？
注意到缺少导入 (ReactDOM) 以及带有 RaisedButton 的类型。我已经相应地修改了我的答案。

【解决方案2】：

您需要导出帮助组件

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

【讨论】：