React基础（三）- HTML属性设置、渲染数组

HTML属性设置、渲染数组

麒麒（小姐姐哦）来啦！！！今天的内容是`HTML属性设置、渲染数组`
代码是看不会的！！！~~~ 一定要动手呦！
如果对你有帮助 就支持下我呦！♥

1. HTML属性设置 - 常规属性

这里以 a 标签的 href 为栗子：

	<div id="demoReact">
    </div>
    <script type="text/babel">
        // 属性设置
        let text = "点我去百度一下";
        let linkUrl = "https://www.baidu.com";
        let myDemo = <a href={
   linkUrl}>{
   text}</a>
        ReactDOM.render(myDemo, document.getElementById("demoReact"))
    </script>

2. HTML属性设置 - class属性

这里有两种方式进行 class 属性的设置

1. 方式1：定义 style 变量后，在标签的 style 属性上赋值

   	<div id="demoReact">
   
       </div>
       <script type="text/babel">
           // 设置class 方式一 注意: css属性使用驼峰命名法
           let myStyle = {
        color:"white", backgroundColor:"pink"}
           let myDemo = <p style={
        myStyle}>我的新样式</p>
           ReactDOM.render(myDemo, document.getElementById("demoReact"))
       </script>
   

2. 方式2：使用标准属性名 — className
   在jsx中，不能使用class（因为是js的关键字），而需要使用