为了账号安全,请及时绑定邮箱和手机立即绑定
  • react 是面向数据编程

    更改数据用 this.setState()

    查看全部
  • 用户定义的组件必须以大写字母开头

    以小写字母开头的元素代表一个 HTML 内置组件
    比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement(作为参数)。

    大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
    如 <Foo /> 会编译为 React.createElement(Foo)。
    我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件,则在 JSX 中使用它之前,必须将它赋值给一个大写字母开头的变量。


    查看全部
    1 采集 收起 来源:什么是组件?

    2019-07-13

  • 温馨提示:使用箭头函数以避免在标签内部或者constructer内部bind(this)的繁琐操作,示例代码如下:

    handleDelete = ()=>{

        your code

    }


    查看全部
  • React 组件传值:

    <ul>{

    this.state.list.map((item,index)=>{

    return <TodoItem content={item}/>

    })

    }</ul>


    注释:item 传的值 

    index :值的位置

    TodoItem :组件名称

    组件接收值:

    先创建组件:

    import React from 'react';

    class TodoItem extemds React.Component{

    render(){

     return(

    <div>{}</div>

    )


    }

    }

    export default TodoItem;//导出组件


    组件接收传过来的值时:

    只需要更改接收方式:

    <div>{this.props.content}</div>

    记:父组件通过属性的形式给子组件传递参数

    子组件通过this.props.(传过来的参数)来接收




    查看全部
  • lts长期稳定版本。 current最新版

    查看全部
  • index.js 是入口,引入React帮助我们理解语法,ReactDOM可以帮我们把组建渲染到组件上,App是一个组件,App.js就是一个组件

    定义组件:class 名称 extends React.Component   显示的内容是render函数里面的return的内容 

    export default 名称 是导出  这样子其他地方才可以导入

    查看全部
    1 采集 收起 来源:什么是组件?

    2019-04-25

  • <React.Fragment></React.Fragment>可代替根元素 <div></div>

    查看全部
  • React 中规定在循环标签的时候,标签内要添加 key 属性,且 key 值不能一样,所以一般值设为循环项的索引值

    查看全部
  • 首先,index.js他是一个入口,首先他引入了react,帮助我们去理解app开头的组件,又引入了reactdom,帮助我们将组件渲染到一个root节点上。结尾的export default app是将其导出,这样,在index.js中才能将他再导入进去,导出和导入是配对使用的。

    而app就是一个组件,她在app.js当中定义,首先,需要定义一个APP的类,她继承react.component.

    当一个类集成了react.componet后他就是react中的一个组件,react 组件中必须有一个函数叫做render,这个函数负责这个组件要显示的内容,并且这个函数会return一个内容,他return回去的内容就是这个组件要 显示的内容

    查看全部
    1 采集 收起 来源:什么是组件?

    2018-12-01

  • constructor(props){
        super(props);
        this.state={
            list:[],
            inputValue:'' //清空
        }
    }
    //2.当点击提交时,列表添加
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:'' //清空
        });
    }
    //1.先执行输入框的监听事件,当值改变时监听
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value //获取input框的值
        })
    }
    render() {
        return (
            <div>
               <div>
                   <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                   <button onClick={this.handleBtnClick.bind(this)}>add</button>
               </div>
                <ul>
                    {/*表达式*/}
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }


    查看全部
  • react 操作数据,不需要操作dom ;
    在react 中操作 state中的数据,尽量不直接操作state的数据,而是拿一个变量接收后,再操作该变量
    如删除函数 

    handleItemClick (index){

        const newList = [...this.state.list];  // 拿newList接收 state中list的值

        newList.splice(index,1); //删除newList中de 该 index的值

        //将删除后的数组放置在state中,

            this.setState({

                list:newList

            })

    }


        



    查看全部
  • 构造函数
        constructor(props){

            super(props);

             this.state = {

                list:[

                。。。// 要展现的数组

                ]

            }

        }


    查看全部
  • onClick = {this.handleBtnClick}
    点击事件 onClick ={ } 大写
    this 指向 handleBtnClick这个事件函数

    没有该事件,则创建 该函数 
    handleBtnClick(){

    。。。

    }

    查看全部
  • 1-1 react 简介

    查看全部
    1 采集 收起 来源:React 简介

    2018-08-09

  •  组件通信:

    父 =》 子

    父组件通过属性的形式向子组件传递参数

    子组件通过props接收父组件传递过来的参数


    子 =》 父

    子组件通过调用父组件传递过来的方法

    父组件通过方法的参数获取子组件传递过来的参数


    查看全部

举报

0/150
提交
取消
课程须知
1、对Javascript基础知识已经掌握。 2、对Es6和webpack有简单了解。
老师告诉你能学到什么?
1、React项目架构搭建 2、JSX语法 3、React组件化开发 4、React组件间通信 5、React中的事件 6、React代码优化 7、React中组件的样式修饰

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!