javascript - React 组件未渲染

Question

我的“Home” react 组件有问题。

我正在使用react-router，并且有一个包含以下内容的路由文件:

 <Router history={ browserHistory }>
      <Route path="/" component={ App }>
        <IndexRoute component={ Home } />
      </Route>
    </Router>

现在，我的 Home 组件在定义如下时可以工作:

export const Home = () => <h3>Index</h3>;

但是如果我这样定义它:

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h3>InDex2</h3>
    );
  }
}

export default Home;

那么它就不起作用了。在第二种情况下没有渲染任何内容，而在第一种情况下我可以看到“索引”...

你知道为什么这不起作用吗？

我的应用程序组件就像这样简单:

export const App = ( { children } ) => (
  <div>
    <AppNavigation />
    { children }
    <Alert stack={{limit: 3}} />
  </div>
)

谢谢。

Answer 1

要导入您的第一个组件，您需要使用命名导出Home:

// Home.js
export const Home = () => <h3>Index</h3>;

// someOtherFile.js
import { Home } from './Home';

在第二种情况下，您需要采用默认导出:

// someOtherFile.js
import Home from './Home';