01 2022 档案
摘要：import React, { Component } from 'react' export default class Input extends Component { constructor(props){ super(props); this.state={ username:"" } }
阅读全文
摘要：在react中。不建议直接操作DOM元素。 在元素上使用ref，可以传字符串，对象，函数。官方推荐对象 字符串方法： <h2 ref="titleRef">字符串方法</h2> <button onClick={e=>this.changText()}>改变文本</button> changText
阅读全文
摘要：第一步：安装events依赖 yarn add events //通过yarn安装npm add events //通过npm安装 第二步：在App.js中引入events import { EventEmitter} from 'events' 第三步：创建一个变量 //事件总线events bu
阅读全文
摘要：通过案例展示问题：一个添加用户信息的案例 import React from 'react' import './App.css' class App extends React.Component { constructor(props){ super(props); this.state = {
阅读全文
摘要：<h2> <ul> { this.state.movies.map((item,index)=>{ return <li>{item}</li> }) } </ul> <button onClick={e=>this.insertMovie()}>添加电影</button> </h2> 点击按钮往前
阅读全文
摘要：数据展示 constructor(props){ super(props); this.state={ name:['流行','新款','精选'], currentTitle:'流行', increment:"Hello,World", title:'coderWhy' } } render(){
阅读全文
摘要：React中的setState既是同步也是异步 同步： 验证一：在setTimeout中的更新 changText(){ setTimeout(()=>{ this.setState({ increment:'你好啊，lpx' }) console.log(this.state.increment)
阅读全文
摘要：父组件的代码展示 class App extends React.Component{ constructor(props){ super(props); this.state={ name:['流行','新款','精选'], //这些数据为tab栏展示的数据 currentTitle:'流行' }
阅读全文
摘要：方法一：通过父传子，一步一步向子组件传递数据 爷爷组件 class App extends React.Component { constructor(props){ super(props); this.state={ nickname:'kobo', level:99 } } render()
阅读全文
摘要：方法一：通过 children获取 class App extends React.Component { render() { return ( <div> {/* <Header /> */} <NavBar> //子组件 <span>aaa</span> <span>bbb</span> <a
阅读全文
摘要：之前我们引入图片可以直接使用 <img src="../assets/logo.png" alt="" /> 但在React中并不可用 推荐方法一： import logo from '../../assets/imgUrl/logo.png' export default function Hea
阅读全文
摘要：1. create-react-app 项目名称 2.关键文件夹：public 和 src public中编写index.html代码，例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv
阅读全文
摘要：父子之间的通信：子传父 子组件： import React, { Component } from 'react' export default class CounterButton extends Component { render() { const {increment} = this.p
阅读全文
摘要：先展示父组件 import React, { Component } from 'react' import Banner from "../Banner/Banner" export default class Header extends Component { constructor(prop
阅读全文
摘要：居中元素宽高已知 1.absolute + margin auto 注意：父元素与当前元素的宽高已知 .parent{ position: relative; width: 500px; height: 500px; border: 1px solid blue; } .child{ backgro
阅读全文
摘要：三大框架都有属于自己的脚手架 Vue的脚手架：vue-cli Angular的脚手架：angular-cli React的脚手架：create-react-app 使用脚手架依赖node环境 安装node ，官网地址：https://nodejs.org/zh-cn/ 用LTS版本，Current先
阅读全文
摘要：JSX实际上，仅仅是React.createElement(compontent,props,...children)函数的语法糖。 const meassage = React.createElement('h2',null,'Hello, React');
阅读全文
浙公网安备 33010602011771号