• 3、直接{}调用函数 4、使用比较运算符 && || ! 说明:通过这种方式尽管onOff的值点击的时候有被改变,但是样式出任然不会有改变,样式出不会被重新渲染,必须运用各个组件的state状态,当这个state...
    条件判断的四种写法
            1、三元表达式 ? :

    2、使用变量,通过函数使用条件判断语句,返回一个字符串

    3、直接在{}中调用函数

    4、使用比较运算符 &&   ||  !


    说明:通过这种方式尽管onOff的值在点击的时候有被改变,但是样式出任然不会有改变,样式出不会被重新渲染,必须运用各个组件的state状态,当这个state状态改变的时候,组件才会去重新渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>条件判断的四种写法</title>
        <style>
            .box1 {
                width: 100px;
                height: 100px;
                background: red;
                color: #fff;
            }
            .box2 {
                width: 150px;
                height: 150px;
                background: #000;
                color: #fff;
            }
        </style>
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var onOff = true;
            var Demo = React.createClass({
                // 自定义一个点击事件
                handleClick:function() {
                   onOff = !onOff;
                   console.log(onOff);
                },
                render:function(){
                    return <div className={onOff?"box2":"box1"} onClick={this.handleClick}>我是一个盒子</div>
                }
            })
            ReactDOM.render(<Demo/>,document.body)
        </script>
    </body>
    </html>


    使用state
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>条件判断的四种写法</title>
        <style>
            .box1 {
                width: 100px;
                height: 100px;
                background: red;
                color: #fff;
            }
            .box2 {
                width: 150px;
                height: 150px;
                background: #000;
                color: #fff;
            }
        </style>
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var Demo = React.createClass({
                // 设置初始的状态
                getInitialState:function(){
                    return {
                        onOff: true
                    }
                },
                // 自定义一个点击事件
                handleClick:function() {
                   this.setState({
                        onOff:!this.state.onOff
                    })
                },
                render:function(){
                    return <div className={this.state.onOff?"box2":"box1"} onClick={this.handleClick}>我是一个盒子</div>
                }
            })
            ReactDOM.render(<Demo/>,document.body)
        </script>
    </body>
    </html>


    展开全文
  • 在react中用jsx渲染dom的时候经常会遇到if条件判断,然而jsx竟是不允许if条件判断的。以下有几种判断方式,可以根据自己的应用场景,挑选适合的。 方案一: class HelloMessage extends React....
  • React 使用 if else 判断语句 2019-10-09 03:14:00
    今天React 时, render 的return中既然不能使用if判断语句,所以就整理一些在react中使用if 的方式,可根据自己的实际情况选择: 方式一: class LLL extends React.Component { constructor(props){ ...
  • TypeScript 是 JS 类型的超集,并支持了泛型、类型、命名空间、枚举等特性,弥补了 JS 大型应用开发的不足,那么当 TypeScript 与 React 一起使用会碰撞出怎样的火花呢?接下来让我们一起探索 TypeScript2.8+ ...
  • React style的使用 2015-11-05 21:13:41
    React中style的使用和直接HTML中使用有些不同,第一,React中必须是style="opacity:{this.state.opacity};"这种写法,第二如果多个style格式如下,多个style中间使用逗号分割 var divStyle = { color: 'white'...
  • react-hooks中判断当前点击对象是否属于某一组件。 项目遇到这种场景,开始是用点击事件的...思路: 使用React-dom的findDOMNode方法,先找到父组件,然后使用contains方法判断点击对象是否属于该组件。 直接...
  • react native平台判断 2018-02-27 11:24:12
    react native平台判断react native 时跨平台的,这点无需多说,不过开发APP时有时需要根据不同的平台写不同的代码,这时就需要做平台判断了,直接上代码:import {Platform,}from'react-native';if(Platform.OS ==...
  • react中使用switch-case语句 2017-12-07 23:02:07
    在react中使用switch-caseswitch
  • 不管是大型项目亦或是小型项目,我觉得编写单元测试是一个很好的习惯,我看了好多博客之后,发现,大多数博客都是写相关配置等问题,而并没有详细传授用户如何使用单元测试,因此,我写这篇文章的目的也是让...
  • 什么是JSX?在React中使用JSX 2018-04-27 15:08:10
    (纯手打,如有错误的地方下方评论,3Q)什么是JSXJSX即...React在使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。这个是官网:http://facebook.github.io/jsx/举个栗子,...
  • React中的style样式 2018-05-15 09:09:01
    在react中使用style样式时,先创建一个对象,对象的内容时css属性以及属性值,使用的时候,将对象绑定相应的元素上 &lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;/...
  • 1:新建一项目 npx create--react-app lesson21 2:删除lesson21里面src目录所有内容 3:分别新建四个js文件 index.js App.js child1.js child2.js 4:分别写入如下代码 index.js import React from 'react'...
  • render()循环数据,根据数据不同展示标签不同 import React from 'react'; const quanList=[ { id:1, buy_price:1,//购买券的价格 quan_price:30,//可抵扣价格 quanName:'仅限(学习机)商品使用', ...
  • 最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下...
  • react jsx 的条件判断 2019-06-13 03:19:43
    为什么80%的码农都做不了架构师?>>> ...
  • 先来说下React组件的声明方式: ...我们在使用的时候不会关心组件的声明方式,但React会关心 所以接下来就说下React是怎么判断组件是用哪种方式声明的 一.Component上直接加标记 // Inside React c...
  • 在使用react的时候,props的值通常作为对象父组件和子组件之间进行进行传递,通常会牵扯到判断对象是否为空的情况,今天遇到,特意来记录下方便以后回顾. 一:使用JSON的内置对象方法JSON.stringify() const obj = {...
  • react render进行if判断 2019-05-09 15:28:17
    render进行if条件判断然后加载相应的模块进行渲染方法如下 第一种: 第二种:
  • wangeditor react中使用 2020-02-27 14:55:51
    一.基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费 使用原因 wangeditor的文档(地址:...使用wangeditor的项目,要对富文本的功能要求简单。 安装 npm 命令安装npm install wanged...
  • handleEnterKey(e){ if(e.nativeEvent.keyCode === 13){ this.handleAdd(); } }
1 2 3 4 5 ... 20
收藏数 30,813
精华内容 12,325