Question

所以，我正在使用KeystoneJS反应发生器＆＃39;作为我的应用程序的框架，以及＆＃39; Material-UI＆＃39;用于预定义组件。我只是试图将这些组件分成不同的文件，并将它们包含在我的主应用程序页面上的一个渲染功能中，但它们只是不会渲染，并且我得到一个空白页面，没有错误在控制台中。

作为一个注释，如果我只是将一堆组件放入我的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>
    );
  }
}

Answer 1

自己忘了这个，但只是因为任何人绊倒了这个......

我根本没有提供我的反应组件所在的目录。

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

ReactJS组件无法呈现

1 个答案: