react第三天

一、react中的state

  每个组件可以拥有自己的data数据,并且这个数据是自己独享

  在react中我们需要使用state(状态)来表示我们每一个组件自己的data数据

  react中state需要在构造函数中进行设置  类似于vue中data   data() {}

  react中state状态设置

constrcutor(props) {

            super(props)  // 超类

            this.state={

                // data数据

            }

        }

同时 我们需要使用this.state.属性名 来获取 state里边设置的data数据

列如：

 <div id="app"></div>
    <script type="text/babel">
    var num=123
    class Child extends React.Component{
        // 构造函数
        constructor(props) {
            super(props)
            this.state={
                num: 456,
                stus: {
                    name: '张三',
                    age: 15,
                    sex: '男',
                    score: 98
                },
                arr: ['标题一','标题二','标题三'],
                bool: false
            }
        }
        render() {
            return(
                <div className="child">
                    child--{num}--{this.state.num}
                    <p>姓名: {this.state.stus.name}</p>
                    <p>性别: {this.state.stus.sex}</p>
                    <p>{this.state.arr[0]}</p>
                    <p style={{display: this.state.bool?'block':'none'}}>这是一段文本内容</p>
                </div>
            )
        }
    }

二、props的使用

   react中组件之间的关系就两种

            父子

            非父子

        props可以作为在react中父组件向子组件传值的一种形式

        步骤：

            1 在父组件中找到子组件标签 在子组件标签上边写上自定义属性名等于要传递的数据

            <子组件标签名 自定义属性名="要传递的数据"></子组件标签名>

            2 在子组件的模板中 通过this.props.自定义属性名 来获取父组件向子组件传递的数据

            {this.props.自定义属性名}

           state与props关系区别

           1 state你可以认为是用来设置组件的data数据

             props是进行组件传值的

           2 props是不可变的 但是state可以根据与用户的交互进行动态改变

            我们需要通过state来更新或者修改数据  

            而子组件只能通过props来获取传递的数据

        react注释

            {/* 要注释的内容 */}

        react封装的组件 是独立存在的  即便是同一个组件 被多次调用  但是之间保持独立的关系

        注意：

            react自定义组件标签中不能直接写内容  写了也不显示

            如果想要react组件标签中写的内容显示出来 我们需要给自定义的组件模板中使                                 用 this.props.children

            例如：

                <自定义组件标签名>内容</自定义组件标签名>

                // 内容可以是任意数据 

                自定义组件的模板中使用 this.props.children

                    return(

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

                    )

 <div id="app"></div>
    <script type="text/babel">
    class Child extends React.Component{
        constructor(props) {
            super(props)
            this.state={
                num: 123
            }
        }
        render() {
            return(
                // <div className="child">child-{this.state.msg}-{this.props.text}-{this.props.name}-{this.props.arr[1]}</div>
                <div className="child">
                    {this.props.children}--child--{this.props.name}-{this.props.text}  {this.props.play}  
                </div>
            )
        }
    }
    // parent是child的父组件
    class Parent extends React.Component{
        constructor(props) {
            super(props)
            this.state={
                msg: 'hello world',
                arr: [1,2,3],
                obj: {
                    name: '张三'
                }
            }
        }
        render() {
            return(
                <div className="parent">
                    parent--{this.state.msg}
                    <Child>
                        <div className="demo">demo测试</div>
                        <Child2></Child2>
                    </Child>
                    <Child name="张三" />
                    <Child name="李四" text="你好"/>
                    <Child name="王五" play="王者荣耀"/>
                    <Child name="马六"></Child>
                    {/* <Child text={this.state.msg} name={this.state.obj.name} arr={this.state.arr} /> */}
                </div>
            )
        }
    }
    class Child2 extends React.Component{
        render() {
            return(
                <div className="child2">child2</div>
            )
        }
    }
    ReactDOM.render(
        <Parent/>,
        document.getElementById('app')
    )
    </script>
</body>

三、使用react props封装button组件

 <div id="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Parent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      lists:["标题一","标题二","标题三"]
    }
  }
  render(){
    return(
      <React.Fragment>
        <div className="parent">这是爹
          <Child list={this.state.lists}></Child>
        </div>
      </React.Fragment>
    )
  }
}
class Child extends React.Component{
  render(){
    return(
      <div className="child">这是儿子
        {this.props.list}
        {this.props.list.map((item,index)=>
          <p >{item}</p>
        )}
      </div>
    )
  }
}
ReactDOM.render(
  <Parent></Parent>,
  document.getElementById("app")
)
</script>

现组件的封装