Question

我的＃34; Home＆＃34;反应成分。

我正在使用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;

然后它无法正常工作。在第二种情况下没有任何东西被渲染，而在第一种情况下我可以看到＆＃39;索引＆＃39; ...

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

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

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';

在第二种情况下，您需要执行default导出：

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

React Component未呈现

1 个答案: