React在Dva项目中创建并引用页面局部组件的方式
更新时间：2023年07月11日 10:04:41 作者：-耿瑞-
这篇文章主要介绍了React在Dva项目中创建并引用页面局部组件的方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
这篇文章我们演示Dva中编写组件的方式
官方这里也特意强调了UI这个关键词
跟多是作为我们界面元素的组件 而不是页面路由 我们要单独做路由的组件肯定还是直接放在我们Dva项目的src下的routes目录下就好了
然后 我们看 项目 src下有一个 components 目录一般我们做什么前端项目 组件都会放在这个目录下这个词 就是专门用来管理组件的统称
然后 我们在components目录下创建一个文件 叫 Product.jsx参考内容如下
import React from "react"
export default class Product extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
商品组件
</div>
)
}
}就是一个非常基本的组件结构 当然这里你用Hook的形式也是完全可以的
然后 我们找到routes下的IndexPage.js整个改成这样
import React from 'react';
import Product from '../../components/Product';
function IndexPage() {
return (
<div>
<Product/>
</div>
);
}
export default IndexPage;单纯引入了一下我们的 Product 并使用它我们启动项目
这还是一个非常基础的功能了
我们之前的组件传入数据方式 在这个里面也是一起正常的
到此这篇关于React在Dva项目中创建并引用页面局部组件的文章就介绍到这了,更多相关React项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要给大家介绍了关于React18的useEffect执行两次如何应对的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用React具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了比ant更丰富Modal组件功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了在react中对less实现scoped配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文主要介绍了react render props模式实现组件复用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式，而不必显式地通过组件树的逐层传递 props，通过实例代码给大家介绍使用步骤，感兴趣的朋友跟随小编一起看看吧2021-06-06
由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下2024-04-04
在 react 中,如果我们想控制子组件的显示和隐藏一般有两种方式,一种是父组件维护子组件显示隐藏状态,另一种则是通过 forwardRef 直接设置子组件的状态进行维护,这两种方式各有优缺点,以及对于不同的使用场景不同,今天我们就来简单讨论下,需要的朋友可以参考下2025-04-04
在项目中,对话框和确认框是使用频率很高的组件,下面这篇文章主要给大家介绍了关于如何在React项目中优雅的使用对话框的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
Objects are not valid as a Rea
这篇文章主要为大家介绍了Objects are not valid as a React child报错解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论