React 学习 11.21

11.21

g、JSX中书写注释

 {/* 多行注释*/}

 

{

// 单行注释

}

h、 为jsx中的元素添加class类名

需要使用使用className来替代class；

htmlFor替换；label中的for属性

原因： class和for也属于js中的关键字，

所以在jsx中不能用class和for

1. 在jsx创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹

 

六、React中创建组件（两种方式）

 第一种：

   function Hello(props  //这是一个形参)

      console.log(props) //控制台中输出props对象

       //react和vue中的props永远都是只读的不可以修改

return<div>这是一个hello组件-{props.name}-{props.age}-{props.gender}</div>

// 也可以 return null表示什么都不渲染

}

 

const dog={

name:’大黄’，

age：3，

gender：‘雄’

}

      ReactDOM.render(<div>

       123

       {/*直接把组件的名称，以标签的形式丢到页面上即可*/}

<hello name={dog.name} age={dog.age} gender={dog.gender}></hello>   //此处可以直接使用展开运算符

                         //<hello {...dog }</hello>

</div>,document.getElementById(‘app’))

步骤

第一步 创建组件 

function Hello(props  //这是一个形参)

      return <div>hello 组件</div>

}

 

 

第二步：为组件传递数据

//使用组件并为组件床底props数据

<hello name={dog.name} age={dog.age} gender={dog.gender}></hello>

 

//在构造函数中，使用props形参，接受外界传递过来的数据

function Hello(props)

      console.log(props) 

       //react和vue中的props永远都是只读的不可以修改

return<div>这是一个hello组件-{props.name}-{props.age}-{props.gender}</div>

}

    

使用ES6的展开运算符号的介绍

<Hello {...dog}></Hello>

 

Var o2={

age:22,

address:’中国北京’，

phone：‘139999’

}

var o1{

name:’zs’

...o2

}   //即可吧o2中的各个属性展开后放在o1中

    //效果就是这样的

// var o1{

name:’zs‘，

age:22,

address:’中国北京’，

phone：‘139999’

 

}