ReactJS 组件不渲染

Question

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

请注意，如果我只是将一堆组件放入我的 application.jsx，我可以将组件添加到运行，所以我假设我做错了什么importing/exporting。非常感谢您的帮助，这里是代码..

// 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>
    );
  }
}

Answer 1

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

我只是没有在 express 中提供我的反应组件所在的目录。

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

ReactJS 组件不渲染

ReactJS components not rendering

reactjs

keystonejs