這篇文章我們演示Dva中編寫組件的方式

官方這里也特意強調了UI這個關鍵詞
跟多是作為我們界面元素的組件 而不是頁面路由 我們要單獨做路由的組件肯定還是直接放在我們Dva項目的src下的routes目錄下就好了

然后 我們看 項目 src下有一個 components 目錄
一般我們做什么前端項目 組件都會放在這個目錄下
這個詞 就是專門用來管理組件的統(tǒng)稱

然后 我們在components目錄下創(chuàng)建一個文件 叫 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 并使用它
我們啟動項目

這還是一個非常基礎的功能了

我們之前的組件傳入數(shù)據(jù)方式 在這個里面也是一起正常的