如何使用ReactDOM Render渲染反应组件

Question

_Header (cshtml) 

<div id="Help"></div>


export default class Help {
    ReactDOM.render(     
           <Help/>,
           document.getElementById('Help')        
        );
}

Help.js (component)


}

我的目标是在标题上呈现帮助按钮。

我已经用id help-modal和a创建了div标签 组件渲染帮助按钮。我在help.js中将这两个连接起来  通过ReactDOM.render（.........）;     当我做npm运行dist和dotnet运行，并看到浏览器 我看不到标题上的按钮。有人可以帮忙吗？

Answer 1

您在中调用ReactDOM.render 一个无法渲染的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')        
);

那就是它。

为避免混淆，请尝试为组件提供有意义的名称。命名它们当你试图将一个导入到另一个时，帮助会变得混乱（在这种情况下是不必要的）。

如果您确实想要将帮助组件嵌套在app.js / index.js根级别组件中，则需要导出该元素，因此类声明行将按如下方式进行修改：

export default class Help extends Component {

然后在您的父组件中，您需要使用以下内容导入它：

import Help from './components/Help';

更新： 刚注意到有一种类型：
import RaisedButton from 'material-ui/RaisedButon';
它错过了一个＆＃39; t＆＃39;在RaisedButton！

应该是：
import RaisedButton from 'material-ui/RaisedButton';

Answer 2

您需要导出帮助组件

<强> Help.js

<RadListView [items]="pictures">
    <template tkListItemTemplate let-item="item">
        <GridLayout>
            <Image col="0" src="{{ 'res://listview/layouts/' + item.photo + '.jpg' }}" stretch="aspectFill" loadMode="async"></Image>
            <!-- <Label col="0" [text]="item.title" textWrap="true"></Label> -->
        </GridLayout>
    </template>
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2" itemWidth="180"></ListViewStaggeredLayout>
    <!-- <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200" spanCount="2"></ListViewGridLayout> -->
</RadListView>

无需创建React组件来呈现HelpComponent

<强> Helppage.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;