react 中 @content 使用总结

余人于RenYu

已于 2025-04-03 11:00:45 修改

阅读量2.4k

点赞数

分类专栏： React.js 文章标签： angular.js 问题解决编辑器

于 2021-01-06 14:18:49 首次发布

本文链接：https://blog.youkuaiyun.com/Y_Cfeng/article/details/112269907

版权

前言

本文章主要对 @connect 做了一个简单介绍分析，和使用注意点，以及其他一些涉及到 dva 相关的知识点，对于更详细的知识点了解，附上了文档参考链接

引入

首先我们来通过一个例子，引出我们这里要描述的内容，假设现在我们需要对书店中书籍产品页面通过点击按钮更新获取书籍产品列表信息，文件涉及目录结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Uc2Hs1F-1609913070645)(https://note.youdao.com/yws/api/personal/file/1CC2F49BDF574D86BEA514802FFF55CF?method=download&shareKey=4380a13ba4568a1ae4316e59da9203ee)]

routes文件下的 ProductPage.js 产品页面

import React, {
    Component } from 'react';
import Product from '../../components/Product.js';
import {
    connect } from 'dva';

@connect(({
     product: {
     productList, innerText }, loading }) => ({
   
    productList,
    innerText,
}))

export default class ProductPage extends Component {
   

    render () {
   
        console.log()
        let {
    productList, dispatch, innerText } = this.props;
        return (
            <div>
                <Product dispatch={
   dispatch} title='hahah' productList={
   productList} />
                {
   innerText}
            </div>
        )
    }
}

子页面 Product.jsx

import React from 'react';
import {
    withRouter } from 'dva/router'
import {
    connect } from 'dva';
    
class Product extends React.Component {
   
    constructor(props) {
   
        super(props);
    }
     
    addProduct = () => {
   
        this.props.dispatch({
   
            // 空间命名
            type: 'product/updateList',
            payload: {
   
                name: '白夜行',
            }
        })
    }
    
    render () {
   
        let {
    productList } = this.props
        return (
            <div>
                product商品:
                <ul>    
                    {
   productList.map((ele, index) => {
   
                        return <li key={
   index}>{
   ele.name}</li>
                    })}
                </ul>
                <!--- 点击添加商品 --->
                <button onClick={
   this.addProduct}>添加商品</button> 
            </div>
        )
    }
}
export default withRouter(Product)

models 文件夹下的 product.js

import * as api from '../services/product'
export default {
   
    namespace: 'product',
    state: {
   
        productList: [
            {
   
                name: '秘密'
            },
            {
   
                name: '变身'
            }
        ],
        innerText: 'hello'
    },
    subscriptions: {
   },
    // 异步操作
    effects: