_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 并查看浏览器时，我看不到 header 上的按钮。任何人都可以帮忙吗？
您在未渲染的 React 组件中调用 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 可能会令人困惑。
如果您确实想将 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';
您需要导出帮助组件
帮助.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
帮助页面.js
import HelpComponent from '../components/Help';
import ReactDOM from 'react-dom';
ReactDOM.render(
<HelpComponent/>,
document.getElementById('Help-modal')
);