qq_40492771的博客

qrcode.react

创建一个文件夹MySwiper，再创建index.js和index.scss文件index.js/** * 轮播图组件 */import React from 'react'import { Swiper, SwiperItem, Image } from '@tarojs/components';import './index.scss';import { View } from '@tarojs/components'const MySwiper = props => {

const delay = (timeout) => {return new Promise(resolve => {setTimeout(resolve, timeout);});};delay(1000).then(_ => {console.log(‘executed’);});

document.getElementById(“div”).scrollTop = document.getElementById(“div”).scrollHeight无效先设置ref，再操作ref<div ref={divEle} style={{ display: ‘block' }}> { list&&list.map((item)=>{ <div>......</div> }) }</div>

先在组件中放置两个div，一个是需要弹出的组件的div，另一个是触发组件的div。//触发div<div style={{ width: '200px', height: '200px', background: 'red', }} >按钮块</div>//弹出的div<div style={{ width: '50px', height: '50px', background: 'blue' }} > 123</div>

图表实现创建的通用图表组件import React, { useEffect, useState } from 'react'import * as echarts from 'echarts';const index = props => { const { height, option } = props const [id, setId] = useState() var myChart useEffect(() => { if

新建一个组件import React,{useEffect,useState} from 'react'import * as echarts from 'echarts';const index = props =>{ const {height,option} = props const [id,setId] = useState() useEffect(() => { let id = ('_' + Math.random()).rep

:global{ .ant-table-pagination-right { float: none !important; text-align: center; }}ant-table-pagination-right 是table的css样式，这样写是修改全部table。只修改一个table，使用下面这个**.less.tableform{ :global{ .ant-table-pagination-right {

config.js中设置....const { PUBLIC_PATH = '/***/' } = process.envexport default defineConfig({ ..... base: PUBLIC_PATH, // 打包路径，默认是/ publicPath: PUBLIC_PATH, // 资源访问路径，默认/ .....})

.less文件:global{ .ant-tree-switcher_close{ background: url('../../assets/browse/down.png') no-repeat; i{ display: none; } } .ant-tree-switcher_open{ background: url('../../assets/browse/up.png') no-re

首先创建一个.jsx文件输入rfc，创建组件模板import React from 'react'export default function index() { return ( <div> </div> )}再把canvas元素引入，顺便把组件模板稍微改下import React from 'react'const index = props => { return (

let oReq = new XMLHttpRequest();oReq.open("GET", getUrl(requestUrlBase, `/api/v1.1/auth_session/export/gathered/point/Data?id=1519`), true);oReq.responseType = "blob";oReq.setRequestHeader("Content-Type", "application/octet-stream", 'cors', "Access-Cont

我使用的是dva框架，通过dva new dva-quickstart直接创建项目首先引入mockjsnpm install mockjs先实现一个简单GET请求在目录的最外层有一个mock文件夹，生成随机数据都放在这里创建一个cs.js和data.js两个文件data.js里放的是默认数据data.jsexport default[ { id:1, name:'a', age:13, type:1, },

先把antd table的基本样式引入，在columns中需要设置单元格属性的列描述数据对象中加入onCell属性，引入css样式import styles from './xxx.less';columns = [ { title: '..', .... onCell(record, rowIndex) {; return { className: styles[`.....`],

name项目名称version项目版本private设为true这个包将不会发布到NPM平台下description包的描述信息scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。husky lint-staged "husky": { "hooks": { "pre-commit...

遍历数据，根据数据中的某个值来更改div边框的颜色picinfo.map(item => ( <div className={styles.boxshow} style={{ borderWidth: '0.5px', borderColor: this.returnColor(item.color) }}> </div> )) returnColor = (color) => { switch (color) {

首先安装npm install --save react-amap

npm安装echarts-for-reactnpm install --save echarts-for-reactnpm install echarts --save引入模块和组件import React from 'react';import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/pie'; //折线图是line,饼图改为pie,柱形图改为barimport 'echarts/lib/component

首先引入，我这里使用是5.3.0npm i swiper@5.3.0 --save 然后在组件头部引入import Swiper from 'swiper';import 'swiper/css/swiper.css';这里我使用的是class组件初始化轮播组件componentDidMount() { this.instanceSwiper()} instanceSwiper() { this.swiperObj = new Swiper('.swipe

class关键字创建组件index.js文件 import React from 'react' import ReactDOM from 'react-dom' // import '@/1-class实例方法和静态方法' class Hello extends React.Component{ constructor(){ super() ...

创建组件的方法index.js 代码如下//导包import React from 'react' import ReactDOM from 'react-dom' const dog = { name:'Da', age:'3', gender:"x"}function Hello(props){ console.log(props) ...