• 例子 展开运算符的作用 把以前数组里的内容全部展开,然后再生成一个新的数组

    例子

    在这里插入图片描述

    展开运算符的作用

    把以前数组里的内容全部展开,然后再生成一个新的数组

    展开全文
  • 运算符、元素变量、三目运算符React的条件渲染…… 如下图,要完成一个简单的切换功能: 废话不多说,直接开始读代码吧! <!DOCTYPE html> <html lang="en"> &...

    今天的知识点不难,主要考验大家伙对代码的阅读能力啦!即将要接触的知识点有&&运算符、元素变量、三目运算符与React的条件渲染……

    如下图,要完成一个简单的切换功能:

    废话不多说,直接开始读代码吧!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="react/react.development.js"></script>
        <script src="react/react-dom.development.js"></script>
        <script src="react/babel.min.js"></script>
        <style>
            #tag input{
                margin:5px;
                padding:5px;
            }
            #tag input.active{
                background:red;
            }
            #tag div{
                width:500px;
                height:200px;
                border:1px solid green;
                background:yellow;
            }
        </style>
    </head>
    <body>
    <div id="wrap">
    </div>
    </body>
    <script type="text/babel">
        // 定义组件China
        function China(){
            return <div>中国</div>
        }
        // 定义组件Japan
        function Japan(){
            return <div>日本</div>
        }
        // 定义组件Korea
        function Korea(){
            return <div>韩国</div>
        }
        // 定义组件Go,该组件根据props.index来决定显示以上三个中的一个。
        function Go(props){
            //定义数组,用于存放最初定义的三个组件的名字
            var arr=["China","Japan","Korea"];
            // 元素变量:为了有条件的渲染组件,可以通过变量来存储元素。
            // 如下 {arr[props.index]}
            // if(props.index>=0 && props.index<arr.length){
            //     return  (
            //         <div>
            //             {arr[props.index]}
            //         </div>
            //     )
            // }
    
            // 根据&&运算符的特性来实现条件渲染。
            // 当props.index不满足条件时,即渲染相应组件
            // 其实是一块语法糖,效果同上方注释代码效果相同
            return (
                <div>
                    {props.index>=0 && props.index<arr.length && arr[props.index]}
                </div>
            )
        }
        //通过class来定义组件Country
        class Country extends React.Component{
            constructor(props){
                super(props);
                //初始化状态
                this.state={
                    index:props.index
                };
            }
            // 定义方法用于改变state.index属性
            change(i){
                this.setState({
                    index:i
                })
            }
            render(){
                return (
                    <div id="tag">
                        {/*JXS 调用class 需要使用className,通过三元运算符得到结果。*/}
                        <input type="button" className={this.state.index==0?"active":""} value="中国" onClick={()=>{this.change(0)}}/>
                        <input type="button" className={this.state.index==1?"active":""} value="日本" onClick={()=>{this.change(1)}}/>
                        <input type="button" className={this.state.index==2?"active":""} value="韩国" onClick={()=>{this.change(2)}}/>
                        <Go index={this.state.index}/>
                    </div>
                )
            }
        }
        ReactDOM.render(
            //指定默认选中项
            <Country index="0"/>,
            document.querySelector("#wrap")
        );
    </script>
    </html>
    

    就到这吧
    —————END—————
    喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容!!!

    展开全文
  • 1.react动态绑定class为对象形式 如: this.props.asideList.map(item=>( <li className={ this.state.curId === item.id?'active':'asideItem'} onClick={(e) => this.getId(e,item.id)} ...

    1.react动态绑定class为对象形式

    如:

    	this.props.asideList.map(item=>(
            <li className={ this.state.curId === item.id?'active':'asideItem'}
                 onClick={(e) => this.getId(e,item.id)} 
                 key={item.id}>
                 {item.name}
             </li>
         ))
    

    满足条件的class才能生效。

    同时满足多个条件的如下:

    this.props.asideList.map(item=>(
        <li className={ this.state.curId === item.id?'active':'asideItem default'}
            onClick={(e) => this.getId(e,item.id)} 
            key={item.id}>
            {item.name}
        </li>
    ))
    

    2.动态绑定style和绑定class大致一样,也是对象语法形式,也是满足条件的才生效

    例:

    this.props.asideList.map(item=>(
        <li className={ this.state.curId === item.id?'active':'asideItem default'}
            style={this.state.curId === item.id?{fontSize:'20px'}:{fontSize:'12px'}}
            onClick={(e) => this.getId(e,item.id)} 
            key={item.id}>
            {item.name}
        </li>
    ))
    
    展开全文
  • 1、扩展运算符与剩余操作符都是以三点开头的操作符,二者长的很像,只是在用法上有些差别。它们已经被 ES6 数组支持,能解决很多之前 arguments 解决起来很麻烦的问题。 2、扩展运算符 扩展语法允许一个表达式在...

    1、扩展运算符与剩余操作符都是以三点开头的操作符,二者长的很像,只是在用法上有些差别。它们已经被 ES6 数组支持,能解决很多之前 arguments 解决起来很麻烦的问题。

    2、扩展运算符

    这三个点(…)在 React 干嘛用的?

    主题: React
    难度: ⭐⭐⭐
    ... 在React(使用JSX)代码中做什么?它叫什么?

    <Modal {...this.props} title='Modal heading' animation={false}/>
    这个叫扩展操作符号或者展开操作符,例如,如果this.props包含a:1和b:2,则

    <Modal {...this.props} title='Modal heading' animation={false}>
    等价于下面内容:

    扩展符号不仅适用于该用例,而且对于创建具有现有对象的大多数(或全部)属性的新对象非常方便,在更新state 咱们就经常这么做:
    this.setState(prevState => {
        return {foo: {...prevState.foo, a: "updated"}};
    });
    
    • 扩展语法允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展

    • 字面量的扩展

    //数组字面量扩展
    let test = [3,4,5],
        copyTest = [...test], // copyTest [3,4,5]
        extTest = [1,2,...test]; //extTest [1,2,3,4,5]
    //对象字面量扩展
    let obj = {a: 1, b: 2},
        copyObj = {...obj}, //
        extObj = {...obj, c: 3};
    
    • 函数调用 作为实参
     function myFunction(x, y, z) {
        return x+y+z;
     }
    var args = [0, 1, 2];
    myFunction(...args); //3
    
    • 替代apply方法的参数使用数组的形式
    Array.prototype.push.apply(arr) //=>// Array.prototype.push(...arr)
    
    • 合并数组、对象
    let array1 = [1,2,3], array2 = [4,5,6],array3 = [...array1, ...array2];
    

    3、rest剩余参数(rest parameter)

    • 剩余参数(rest parameter)语法允许我们将一个不定数量的参数表示为一个数组,
    function sortRestArgs(...theArgs) {
      var sortedArgs = theArgs.sort();
      return sortedArgs;
    }
     
    
    alert(sortRestArgs(5,3,7,1)); // 弹出 1,3,5,7
    

    听起来感觉和arguments他有点相似:

    • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
    • arguments 对象不是一个真实的数组,而剩余参数是真实的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sort,map,forEach,pop。
    • arguments 对象对象还有一些附加的属性 (比如callee属性)。
      还可以和结构赋值一起使用
    var [a, ...rest] = [1, 2, 3, 4];
    console.log(a);//1
    console.log(rest);//[2, 3, 4]
    

    4、扩展运算和rest参数注意

    • 对于三个点号…,三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符,或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符。
      注意

    • 在等号赋值或for循环中,如果需要从数组或对象中取值,尽量使用解构。

    • 在自己定义函数的时候,如果调用者传来的是数组或对象,形参尽量使用解构方式,优先使用对象解构,其次是数组解构。代码可读性会很好。

    • 在调用第三方函数的时候,如果该函数接受多个参数,并且你要传入的实参为数组,则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。

    • rest运算符使用场景应该稍少一些,主要是处理不定数量参数,可以避免arguments对象的使用。

    展开全文
  • 我们知道在JSX中遇到{}就以js来解析,所以遇到{…this.props}左边的{时,开始以js来解析,按照ES7的对象扩展运算符语法,无法解析 成对象,因为需要再多一个{}包住…this.props才行,否则会报错,更别提把父组件属性...

    看到别人的代码中有这样一句

    <TabBar {...this.props} />
    

    引用:
    “对其中的{…this.props}产生了疑惑。我们知道在JSX中遇到{}就以js来解析,所以遇到{…this.props}左边的{时,开始以js来解析,按照ES7的对象扩展运算符语法,无法解析
    成对象,因为需要再多一个{}包住…this.props才行,否则会报错,更别提把父组件属性传给子组件使用了,那么是怎么运作的呢。”

    这是JSX的一个属性传递的简写,具体内部如何实现我没有深究,React 初学者教程6 :传递属性这篇文章中讲到了这个写法的由来。

    展开全文
  • render() { const isLoggedIn = this.state.isLoggedIn; return ( &lt;div&gt; {isLoggedIn ? ( &lt;LogoutButton onClick={this.handleLogoutClick} /&gt; ) : ( ...LoginBu...
  • 看别人代码看到 render() { return <Modal {...this.props}> {this.props.children} </Modal>...我们知道在JSX中遇到{}就以js来解析,所以遇到{...this.props}左边的 { 时,开始以js来解析。...
  • React中state的定义中有一个坑不易被发现,主要是state属性未被定义就是使用,需要用到运算符: 举个栗子: class App extends Component{ this.state={ } componentDidMount(){ 请求后端接口拿到数据...
  • 当我们要给组件传递的属性很多的时候,不可能一个个去写,这时可以通过使用ES6的展开运算符简化传递props数据的过程: // 导入包 import React from 'react' import ReactDOM from 'react-dom' let person = { ...
  • 写在前面这个系列的文章没有提供react的系列用法,只提供了一些在实现细节方面的遇到问题的解决方法,所以在学习这个系列内容的时候,已经假定你有了一些react基础。如果没有,推荐学习react初学者教程 三目运算符...
  • 在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当不满足 条件时,渲染ComponentB const ...
  • React学习第二天 React学习第二天 创建组件的方式( function 和 class) ES6 扩展运算符使用 抽离 jsx 组件 如何省略 jsx 后缀名? 使用@别名表示路径 两种创建组件方式的对比 评论列表案例 没有收拾残局的能力,...
  • 总结一下react的render渲染。 首先render的结构是这样 render(){ //JS代码 return() } render都有一个return()部分,小括号内用来写纯HTML render中可以嵌套render 嵌套的render用法 reder:()=>() ...
  • 先看一段代码: function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 &... <...
  • 写在配置文件里面也不行个文件里都有es2015 都有preset ,打包报错还无法解析三点,只是es2015没报错找不到了cnpm install babel-preset-stage-3 --save-dev 必须加这一个,然后在配置里面2015后面也加上stage-32...
  • 比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都会使用到的就是三目运算符(?:)也叫内联条件运算符,可能大家都有体会三目运算符并不是一种直观的书写...
  • 妙用ES6解构和扩展运算符让你的代码更优雅 原文  http://www.cnblogs.com/chrischjh/p/4848934.html 主题 ECMAScript Javascript ES6/ES2015尘埃落定,其中许多特性其实是为了简化代码。解构运算符...
  • 】、按位取反运算符【~】、自增自减运算符【++ –】、负号运算符【-】、类型转换运算符【(类型)】、指针运算符和取地址运算符【*和&】、长度运算符【sizeof】这些是单目运算符2、双目运算符在运算过程中需要2个数字...
1 2 3 4 5 ... 20
收藏数 5,122
精华内容 2,048