首页 > 其他分享 >React(九):state的简写

React(九):state的简写

时间:2023-07-30 15:36:19浏览次数:31  
标签:render color React state isDog 简写

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>state的简写形式</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>

</body>

<script type="text/babel">

    //定义类组件
    class MyComponent extends React.Component {

        //在类内部以以下形式声明对象或者方法是直接在实例对象上存在,原型对象上不存在
        state = {
            isDog: true,
            color: '黑色'
        }
        changeAnimal = () => {
            const isDog = this.state.isDog
            this.setState({isDog: !isDog})
        }
        render() {
            console.log(this)
            const { isDog, color } = this.state
            return (
                <div onClick={this.changeAnimal}>
                    <h1>
                        <span>这是一只{isDog ? '狗' : '猫'},颜色是{color}</span>
                    </h1>
                </div>
            )
        }

    }
    //react渲染
    ReactDOM.render(<MyComponent />, document.getElementById("test"))

</script>

</html>

 

标签:render,color,React,state,isDog,简写
From: https://www.cnblogs.com/jmsstudy/p/17591497.html

相关文章

  • vue中ref和reactive的区别
    在Vue3中,`ref`和`reactive`是两种不同的响应式数据处理函数,它们有以下区别:1.**处理的数据类型**:-`ref`:`ref`函数用于处理基本数据类型,如数字、字符串、布尔值等。它可以将基本类型数据包装成一个响应式的引用,使其在模板中能够自动追踪变化。-`reactive`:`reactive......
  • React(七):state初始化
    一、state是什么 从字面上来书state就是状态,在React中,state驱动页面的展示,它负责存放数据。二、state的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>初始化state</title><scriptsrc="https://unpkg.com/react@18/u......
  • React(三):Hello,React
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>helloReact</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script><scriptsrc=......
  • React(四):虚拟DOM创建的两种方式
    1.使用js创建虚拟DOM(不推荐使用)<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>js创建虚拟DOM</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script>......
  • React(五):jsx语法
    1.jsx语法<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jsx语法</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script><script......
  • React(六):组件的两种创建方式
    1.函数式组件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>函数式组件</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script><script......
  • React 正在经历 Angular.js 的时刻吗?
    本文作者FrançoisZaninotto是资深React开发者,在看到React官方开始推广服务器组件后,他对此表示担忧,因为这会让现有的很多写法都失效。文章讨论了React和Next.js团队最近推广的服务器组件,这种新的构建Web应用程序的方式与大多数现有的React应用程序不符。因此,作者提......
  • React18学习笔记
    目录使用Create-React-App创建项目使用Vite创建项目JSX语法基础标签属性事件插入JS变量和表达式条件判断循环实践:列表页组件Props组件通讯HooksuseState基本使用特点使用useState实现问卷的增删改使用immer解决不可变数据问题useEffectuseRefuseMemo......
  • react antd5 分页英文,设置中文
    使用ConfigProvider包裹住英文组件,或者包裹根目录import{ConfigProvider}from'antd';importzhCNfrom'antd/locale/zh_CN';<ConfigProviderlocale={zhCN}><Paginationtotal={85}showSizeChangershowQuickJumpershowTotal=......
  • React主要用于构建UI,React UI框架使交互式的UI变得容易
    优秀的ReactUI框架,可以为你节省开发时间、提高开发效率,统一设计语言。还在为你的项目寻找高质量的 React UI 框架吗?为了让你更轻松地找到好用的UI框架,Pixso精心挑选了6个优秀的ReactUI框架选项,并展开诉说了每个UI框架的不同功能和用户友好性,以便你可以选择最适合你开发目......