如何使用ReactDOM Render渲染React组件 [英] 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)


}

我的目标是在标题上显示一个帮助按钮.

我已经创建了id为help-modal的div标签，并且 组件渲染帮助按钮.我正在help.js中连接这两个 通过ReactDOM.render(.........); 当我执行npm run dist和dotnet run时，看到浏览器 我看不到标题上的按钮.有人可以帮忙吗??

解决方案

您正在调用内部未渲染的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组件嵌套在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';

_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. I am connection those two in help.js by ReactDOM.render(.........); when I do npm run dist and dotnet run , and see the browser I couldn't see the button on header . Can any one help on this please ??

解决方案

You are calling ReactDOM.render within a React component that doesn't get rendered.

Call ReactDOM render outside of the class definition for help

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:

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!

should be:
import RaisedButton from 'material-ui/RaisedButton';

这篇关于如何使用ReactDOM Render渲染React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！