React
feyman很努力
这个作者很懒,什么都没留下…
展开
-
React 父向子传值
import React from 'react'/* 实现父子通信中的父传子,把父组件中的数据传给子组件 实现步骤: 1.父组件提供要传递的数据 state 2.给子组件标签添加属性值为satate中的数据 3.子组件中通过props获取数据 1.类组件中通过this.props获取 2.函数组件中通过props获取(需要传参props)注意事项:1.props是只读对象,不能进行修改2.props可以传递任何数据数字、字符串、布尔值、对象、数组、函数、jsx元..原创 2022-05-10 19:45:32 · 864 阅读 · 0 评论 -
React 受控组件
//受控组件//React组件状态的地方实在state中,input表单元素也有自己的状态实在value中,//React将state与表单元素的值(value)绑定在一起,由state的值控制表单元素的值,从而保证单一数据源特性。/** * 实现步骤 * 1.在组件的state中声明一个组件的状态数据 * 2.将state状态数据设置为input标签元素的value属性的值 * 3.为input标签元素绑定onChange事件 * 4.在事件处理程序中,通过事件对象e获取到当前文本框的..原创 2022-05-10 19:44:51 · 143 阅读 · 0 评论 -
React 修改数据
import React from "react"class Test extends React.Component { state = { count: 0, list: [1, 2, 3, 4, 5], person: { name: '张三', age: 18 } } //修改数据(不要直接修改状态的值,而是基于当前状态值创建新的状态值) //添加数据 changeState = () => { this.setState({..原创 2022-05-10 19:44:10 · 1436 阅读 · 0 评论 -
React jsx-counter组件实例
import React from "react"class Test extends React.Component { state = { count: 0 } render () { return ( <div> <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>{this.state.count}<..原创 2022-05-10 19:43:20 · 144 阅读 · 0 评论 -
React jsx-修改事件状态
import React from "react"class Test extends React.Component { state = { name: 'zhangsan' } ChangeState = () => { this.setState({ name: 'lisi' }) } render () { return ( <div> this is test 当前name为:..原创 2022-05-10 19:40:47 · 121 阅读 · 0 评论 -
React 函数创建和渲染
import React from "react"//函数组建的创建和渲染//创建// 1.组件名称必须首字母大写,react内部会根据这个来判断是否是组件还是普通的HTML标签//2.函数组件必须有返回值,表示UI结构,如果不需要渲染的话,可以返回null//3.组件就像HTML标签,可以被渲染到页面上,对于函数组件来说,渲染的内容是返回的值//4.使用函数名称作为组件标签名称,在页面上使用时,就是使用函数名称//如何获取事件对象e?//只需要在函数组件中传入参数e就可以获取事件对象..原创 2022-05-10 19:39:58 · 800 阅读 · 0 评论 -
React jsx样式控制
//jsx样式控制//1.行内控制 -在元素身上绑定一个style属性//2.类名控制 -在元素身上绑定一个className属性import './app.css'const name='zhangsan'const style = { color: 'red', fontSize: '30px'}//动态控制一下这个active类名。const isActive = truefunction App () { return ( <div classN..原创 2022-05-10 19:39:09 · 248 阅读 · 0 评论 -
React精简模板
//有一个type状态 1 2 3//1 -> h1//2 -> h2//3 -> h3//原则:模板中的逻辑尽量保持精简//复杂的多分枝的逻辑,收敛为一个函数 通过专门的函数来写分支逻辑 模板中只负责调用即可const getHtag = (type) => { if (type === 1) { return <h1> this is h1 </h1> } if (type === 2) { retur..原创 2022-05-10 19:38:17 · 257 阅读 · 0 评论 -
React条件渲染
//条件渲染//技术方案:三元表达式(常用)逻辑&&运算//1.三元表达式 -满足条件才渲染一个span标签//2.&&const flag=truefunction App() { return ( <div className="App"> {flag ? ( <div> <span> this is span</span> </div&g..原创 2022-05-10 19:37:18 · 186 阅读 · 0 评论 -
react如何完成列表渲染
//识别常规变量const name = '张三'//react如何完成列表渲染//技术方案:map 重复渲染的是那个模板,就return谁//注意事项:在遍历列表时同样需要一个类型为number/string不可重复的key,提高diff性能//key仅仅在内部使用,不会出现在真实的dom结构中const songs = [ { id: 1, name: '说散就散' }, { id: 2, name: '稻香' }, { id: 3, name: '龙拳' }, { i..原创 2022-05-10 19:32:15 · 224 阅读 · 0 评论