[英]how to render a react component using ReactDOM Render
_Header (cshtml)
<div id="Help"></div>
export default class Help {
ReactDOM.render(
<Help/>,
document.getElementById('Help')
);
}
Help.js (component)
}
My goal is to render a help button on header. 我的目标是在标题上呈现帮助按钮。
I've Created div tag with id help-modal , and a component rendering help button. 我创建了带有id help-modal的div标签,以及一个组件渲染帮助按钮。 I am connection those two in help.js by ReactDOM.render(.........); 我在ReactDOM.render(.........)的help.js中将这两个连接起来; when I do npm run dist and dotnet run , and see the browser I couldn't see the button on header . 当我做npm运行dist和dotnet运行,并看到浏览器我看不到标题上的按钮。 Can any one help on this please ?? 有人可以帮忙吗?
You are calling ReactDOM.render within a React component that doesn't get rendered. 您在 React组件中调用ReactDOM.render ,该组件未呈现。
Call ReactDOM render outside of the class definition for help 在类定义之外调用ReactDOM渲染以获取帮助
To render your button to the screen: 要将按钮渲染到屏幕:
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')
);
That's it. 而已。
To avoid confusion should try and give your components meaningful names. 为避免混淆,应尝试为组件提供有意义的名称。 Naming both of them Help can get confusing when you are trying to import one into another (which in this case isn't necessary). 命名它们当您尝试将一个导入到另一个时,帮助会变得混乱(在这种情况下不需要)。
If you indeed wanted to nest the Help component in an app.js/index.js root level component, it would be necessary to export the element, so the class declaration line would be modified as follows: 如果您确实希望将Help组件嵌套在app.js / index.js根级别组件中,则需要导出该元素,因此类声明行将按如下方式进行修改:
export default class Help extends Component {
then in your parent component, you'd need to import it with something like: 然后在您的父组件中,您需要使用以下内容导入它:
import Help from './components/Help';
UPDATE: just noticed there was a type with: 更新:刚刚注意到有一个类型:
import RaisedButton from 'material-ui/RaisedButon';
it's missing a 't' in RaisedButton! 它在RaisedButton中缺少't'!
should be: 应该:
import RaisedButton from 'material-ui/RaisedButton';
You need to export the Help Component 您需要导出帮助组件
Help.js 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;
And no need to create a React Component to render the HelpComponent 并且无需创建React组件来呈现HelpComponent
Helppage.js Helppage.js
import HelpComponent from '../components/Help';
import ReactDOM from 'react-dom';
ReactDOM.render(
<HelpComponent/>,
document.getElementById('Help-modal')
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.