如何使用 ReactDOM Render 渲染一个 React 组件
Posted
技术标签:
【中文标题】如何使用 ReactDOM Render 渲染一个 React 组件【英文标题】:how to render a react component using ReactDOM Render 【发布时间】: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的首页上
【参考方案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 在类定义之外被调用并接收上面定义的您需要导出帮助组件
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')
);
【讨论】:
以上是关于如何使用 ReactDOM Render 渲染一个 React 组件的主要内容,如果未能解决你的问题,请参考以下文章
第十五篇:ReactDOM.render 是如何串联渲染链路的?(下)
第十五篇:ReactDOM.render 是如何串联渲染链路的?(下)
第十四篇:ReactDOM.render 是如何串联渲染链路的?(中)
ReactDOM.render 与 React 组件渲染区别