11.21
g、JSX中书写注释
{/* 多行注释*/}
{
// 单行注释
}
h、 为jsx中的元素添加class类名
需要使用使用className来替代class；
htmlFor替换；label中的for属性
原因： class和for也属于js中的关键字，
所以在jsx中不能用class和for
在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’
}
