反应组件未呈现

Posted 2023-02-22

【中文标题】反应组件未呈现

【英文标题】：React Component not rendered

【发布时间】：2017-05-12 23:38:44

【问题描述】：

我的“主页”反应组件有问题。

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

然后它不工作。在第二种情况下什么都没有呈现，而在第一种情况下我可以看到“索引”...

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

我的 App 组件就这么简单：

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

谢谢。

【问题讨论】：

我的回答对你有用吗？如果是这种情况，请考虑 accepting it。

【参考方案1】：

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

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

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

在第二种情况下，您需要使用default 导出：

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

【讨论】：

谢谢。我正在使用 Home 组件，因此它不起作用。关于“默认”的使用，您是否有最佳实践可遵循？

@user3900157 没问题。如果您只是从文件中导出单个内容，我认为使用default 会很好。

我总是忘记导出。