3.react 基础 - JSX 语法

1.最基础的 JSX 语法

　　普通javaScript中 引入 标签

　　　　let html = '<h1>hello</h1>';

　　jsx语法　　

　　　　let JSX_html = <h1>JSX</h1>

　　自定义标签

　　　　import React from 'react';

　　　　import ReactDOM from 'react-dom';

　　　　// 引入自定义 React 组件  

　　　　import App from './App'

　　　　// 自定义 组件标签 进行渲染 （以大写开头的 标签 为组件标签  全部为小写的标签 为html 标签）

　　　　ReactDOM.render(<App />, document.getElementById('root'));

 

2. 在 JSX 语法中编写注释

　　{/*里面是注释内容*/}

　　或者

　　{

　　　　// 这是注释

　　}

 

3. 定义 JSX 的 标签的类名 使用 className 来设置 css 定义的样式

　　 <input className="input-style">

 

4. 对于 变量内 有标签的 变量 不进行转译操作

　　eg: 

　　　　let str = <span style="color: yellow;">包含标签的变量<span>;

　　　　<li dangerouslySetInnerHTML={{__html: str}}></li>

 

5. label 标签

　　label 标签的 for 属性 指定到 input 的label 标签的id上时

　　　　点击 label 标签 会 自动 focus 到 input 上

　　而在 react 内 需要使用 htmlFor

　　eg:

　　　　<label htmlFor="content">输入内容</label>

　　　　<input id="content" />