由于今天比较闲，就玩了玩react，然后就封装了一个地图的组件，当然功能比较简单，因为就是随手写的小东西，但是由于引用了百度API和bee-mobile，所以用起来可能要薛微麻烦一点点，但是我保证，只是一点点而已。由于之前发了一次，说字数太少从主页移出了，作为一个铁头娃，那我肯定得重写啊。前一次发的不够细致，这次就薛微细一点好吧，由于，由于，鱿鱼，说的我都饿了。不说了进入正题好吧，首先说说主体思想，思想比较简单，去...
1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤：1. <input ref="stringRef" /> 2. this.refs.stringRef//值：<input /> 1.2 类组件上使用 获取引用类组件的实例 //使用步骤1. <Child ref="compStringRef" />2.this.refs.compStringRef//值：{props:{},refs:{},state:null,....} 2.回调函数 2.1 dom节点上挂载回调函数 函数的入参为dom节点 //使用步骤1.<input ref={(re...
进入项目根目录 一、安装eslint-plugin-react-hooks：cnpm i -D eslint-plugin-react-hooks 二、配置ESLint：1.打开项目根目录的package.json2.把 "eslintConfig": {"extends": ["react-app","react-app/jest"]},改为 "eslintConfig": {"extends": ["react-app","react-app/jest"],"plugins": ["react-hooks"],"rules": {"react-hooks/rules-of-hooks": "error"}},3.重启项目 原文：https://www.cnblogs.com/starlog/p/14671315...
React生命周期第二个demo演示了兄弟组件的通信，需要通过父组件，比较麻烦；下面介绍sub/pub机制来事项组件间通信。 1、导包npm i pubsub-js 2、UserSearch.jsximport React from ‘react‘
import PubSub from ‘pubsub-js‘export default class UserSearch extends React.Component {state = {keyword: ‘‘}render() {const { keyword, userList } = this.statereturn (<div><h3>搜索用户</h3><input type="text" placeholder=...
直接上代码<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><div><input type="text" v-model="uname"><button @click.stop.prevent="add">添加</button></div><ul><li v-for="(item, index) in list" :key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</li></ul></div><script src="http://ybf-shopnew.oss-cn-beijing.aliyuncs.com/web_vend...
普通的用法不赘述了，记录的关键是这次的需求产品大佬的要求是这样的：1.我们树父与子之间互不关联2.选中时输入框显示互不关联以上两点好说，加俩属性嘛：那么问题来了，加了这俩属性之后，文档的描述是这样的：秀，给我来个强制，理解不了看下上下文，也就是说：ok，也就是我们每次选中的时候，得到的不再是字符串数组，而是数组里包裹着一条一条的对象，俩属性，一个label做标题，一个value。那么做初始化的时候，我们需要给的初...
基于React写的小todoList最近在学习阮大的react入门,自己试着写的ToDoList<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/browser.min.js"></script></head><body><div id="example"></div><script type="text/babel"> // 子与父通信，3个步骤 /* ①在父组件中 ...
1.初始化 Initalization2.state/props更新 3.销毁阶段 Destruction一、initialization constructor() 构造阶段componentWillMount() 模块将要安装render 母鸡(递交)componentDidMount 已生成二、update componentWillReceiveProps() 收到数据变化？ shouldCompnentUplate 将要更新？ componentWillUpdate() 在组件render之前执行且只会执行一次 render componentDidUpdate 在这里才生成...
主要作用是向store里面注入一个history对象，方便story里面的函数调用function withStoreHistory(storeName) {if (!storeName) return console.error(`必须输入一个查询数据的store`);return function(Target) {class WithStoreHistory extends Component {componentDidMount() {const { history } = this.props;const store = this.props[storeName];store.history = history;}render() {return <Target {...this.props} />;}}ret...
注：三个页面A,B,C（B页面引入A，C页），A页面中的一个值传递给C页面实现方法 B页面代码：//B页面引入C<C ref="comRef" />//B页面引入A<A getImg={(img) => { this.getImg(img) }}/>getImg(img) { this.refs[‘comRef‘].getHeadImg(img) } A页面代码：在某个方法中触发需要传递的值this.props.getImg(this.state.hea...
解决异步：1、nextState（推荐）import React from ‘react‘class Home extends React.Component{ constructor(props){ super(props); this.state = { data :0 } } componentDidMount(){ this.timer = setInterval(()=>{this.setState({date:new Date()})},1000) } componentWillMount(){ clearInterval(this.timer) } render(){ return( <Reac...
The way you make HTTP requests in React Native is with the Fetch API. In this video we‘ll talk about Fetch and how to work with promises.As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component. Create api.js:let api = {getBio(usernam...
以前理所当然的认为，只要ref作为props传进去，就可以直接给某个子组件用了，但是实际上不是这样的const Test = ({ref}) => {return <div ref={ref}><p>hahahha</p></div>
}class TestWarper extends React.Component {ref = React.createRef();render() {return <Test ref={this.ref} />}
}
// 上面这种情况下，this.ref永远是{current: null}，在Test子组件也发现，传进来的ref是undefined面对这种情况，React有个方法，可以支持...
Model 原型 Comment Box <div className="commentBox"> <h1>Comments</h1> <CommentList /> <CommentForm/> </div>React中，可以定义类似的模型在这里我们可以看到我们熟悉的模型，例如 div h1,但是也能看到我们自定义的CommentList CommentForm.而对于这个CommentList呢，自己又需要重新定义这个一个字模型，当然，他最后呈现的是一个数组，多条记录的显示，类似论坛里面我们看到的一条条记录。完整...
安装Webpack1. npm i -D 是npm install --save-dev 的简写，是指安装模块并保存到package.json的devDe pendencies，npm i -D webpacknpm init -ynpm install webpack webpack-dev-server --save-devnpm install --save-dev webpack-cli -g2.全局安装 npm i -g webpack运行在项目根目录下对应的命令行里通过node rnodules/.bin/webpack 运行Webpack 的可执行文件。在Npm Script 里定义的任务会优先使用本项目下的Webpack创建src 文件...
