JSX的使用及相关语法

变量的使用

在jsx中可以定义一个变量,然后赋值,然后交给虚拟ＤＯＭ,用 {变量} 将变量包起来

const myId = 'YYY';
const VDOM = (
  <h1 id={myId}>
    <p>
      这是一个层层title
    </p>
  </h1>
);

但是class标签类名就有点问题了

class标签类名

const myId = 'YYY';
const VDOM = (
    <h1>
        <p class="title">
            这是一个层层title
        </p>
    </h1>
);

上述代码中的class会产生warning

处理方法就是将class改成className

const myId = 'YYY';
const VDOM = (
    <h1 id={myId}>
        <p className="title">
            这是一个层层title
        </p>
    </h1>
);

搞定,目的就是为了**避免ES6的class**声明类的用法

JSX中的内联样式表使用

<div style={{backgroundColor:'black'}}></div>

注意点

样式内容要写成对象的形式
组合词的属性要用小驼峰来写
属性的内容要用用引号引起来,否则就是使用变量
class要写成className，为了区分class类

标签必须闭合

<input type="text" />		//结尾加一个反斜杠将其闭合

React中标签的使用

若是小写字母开头，则会判定去找html中对应的标签，若无则报错
若是大写字母开头，则会去渲染对应的组件，若没有定义则报错

使用js语法遍历数组，在jsx中的使用

const arr = ['JavaScript', 'CSS', 'HTML', 'React', 'Regular', 'Vue'];
const VDOM = (
  <div>
    <h1>前端学习</h1>
    <ul>
      {
        arr.map((item, index) => <li key={index}>{item}</li>)
      }
    </ul>
  </div>
)
ReactDOM.render(VDOM, document.getElementById("#root"));

目录 | Outline

#JSX的使用及相关语法

#变量的使用

#JSX中的内联样式表使用

#React中标签的使用

JSX的使用及相关语法

变量的使用

JSX中的内联样式表使用

React中标签的使用