ReactJS 组件不渲染答案

【问题标题】：ReactJS components not renderingReactJS 组件不渲染
【发布时间】：2016-04-20 04:12:39
【问题描述】：

因此，我使用“KeystoneJS 反应生成器”作为我的应用程序的框架，以及用于预定义组件的“Material-UI”。我只是试图将这些组件分离到不同的文件中，并将它们包含在我的主应用程序页面上的一个渲染函数中，但它们根本不会渲染，并且得到一个空白页面，控制台中没有错误。

作为说明，如果我只是将一堆组件放入我的 application.jsx 中，我可以让组件运行，所以我假设我在导入/导出时做错了。非常感谢您的帮助，这里是代码..

// application.jsx
/** @jsx ReactDOM.DOM */

import ReactDOM from 'react';
import ReactDOM from 'react-dom';
import LeftNavSimpleExample from './nav-bar.jsx';
import AppBarExampleIconMenu from './app-bar.jsx';
// -------------------- components ----------------------------//

ReactDOM.render(
    <div>
        <AppBarExampleIconMenu />
        <LeftNavSimpleExample />
    </div>,
    document.getElementById('app')
)

//app-bar.jsx

   /** @jsx React.DOM */

import React from 'react';
import AppBar from 'material-ui/lib/app-bar';
import IconButton from 'material-ui/lib/icon-button';
import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/lib/menus/menu-item';

const AppBarExampleIconMenu = () => (
  <AppBar
    title="Title"
    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
    iconElementRight={
      <IconMenu
        iconButtonElement={
          <IconButton><MoreVertIcon /></IconButton>
        }
        targetOrigin={{horizontal: 'right', vertical: 'top'}}
        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
      >
        <MenuItem primaryText="Refresh" />
        <MenuItem primaryText="Help" />
        <MenuItem primaryText="Sign out" />
      </IconMenu>
    }
  />
);

export default AppBarExampleIconMenu;

//nav-bar.jsx
/** @jsx React.DOM */    
import React from 'react';
import LeftNav from 'material-ui/lib/left-nav';
import MenuItem from 'material-ui/lib/menus/menu-item';
import RaisedButton from 'material-ui/lib/raised-button';

export default class LeftNavSimpleExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  render() {
    return (
      <div>
        <RaisedButton
          label="Toggle LeftNav"
          onTouchTap={this.handleToggle}
        />
        <LeftNav open={this.state.open}>
          <MenuItem>Menu Item</MenuItem>
          <MenuItem>Menu Item 2</MenuItem>
        </LeftNav>
      </div>
    );
  }
}

【问题讨论】：

检查路径？是jsx还是js？
你用什么来加载模块？网页包？

标签： reactjs keystonejs

【解决方案1】：

我自己忘记了，但以防万一有人偶然发现这个..

我根本没有从 express 提供我的 react 组件所在的目录。

app.use(express.static('files'));

【讨论】：