create-react-app 父组件嵌套子组件
时间: 2024-01-22 14:16:12 浏览: 27
在create-react-app中,可以使用React Router来实现父组件嵌套子组件的功能。下面是一个示例代码:
```jsx
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
// 父组件
const ParentComponent = () => {
return (
<div>
<h1>父组件</h1>
<Route path="/parent/child" component={ChildComponent} />
</div>
);
};
// 子组件
const ChildComponent = () => {
return (
<div>
<h2>子组件</h2>
<p>这是子组件的内容。</p>
</div>
);
};
// 在根组件中使用路由
const App = () => {
return (
<Router>
<Route path="/parent" component={ParentComponent} />
</Router>
);
};
export default App;
```
在上面的代码中,我们定义了一个父组件`ParentComponent`和一个子组件`ChildComponent`。在父组件中,我们使用`Route`组件将子组件嵌套在父组件中的特定路径`/parent/child`下。然后,在根组件`App`中,我们使用`BrowserRouter`将整个应用包裹起来,并将父组件的路径设置为`/parent`。
这样,当用户访问`/parent/child`路径时,父组件会渲染,并且子组件也会被渲染在父组件中。