React 基本语法 createElement 属性、变量、style样式、事件

React语法

• React不是一个MVC框架，它是一个构造可组合式用户界面的库。它鼓励创建可重用的UI组件显示会随着时间而改变的数据。
• learn once, write anywhere

基本结构

JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。

在线编译器

JSX 使用const ele = <h1>title</h1>

var root1 =(
  <ul className="my-list">
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);

var root2 = React.createElement('ul', { className: 'my-list' },
  React.createElement('li', null, 'First Text Content'),
  React.createElement('li', null, 'Second Text Content')
);

得到的HTML DOM节点root1和root2一样

变量（大括号）

大括号能用到三个位置，

1. 属性
2. 属性值
3. innerHtml

const eleProps = {className:'test',style:{color:'red'}}
const loser = "haungbo"
const myDir = "rtl"
const element = <h1 {...eleProps} dir={myDir}>Hello, {loser}!</h1>;

属性

//字符串属性
const element = <div tabIndex="0"></div>;
//变量属性
const element = <img src={user.avatarUrl}></img>;

属性名变成驼峰式。

value,id,title,alt,htmlFor,longDesc,className

accessKey,bgColor,cellPadding,cellSpacing,codeBase,codeType,colSpan,dateTime,defaultValue,contentEditable,frameBorder,maxLength,marginWidth,marginHeight,rowSpan,tabIndex,useMap,vSpace,valueType,vAlign

style

//法一
<div style={{color: '#f00', fontSize: '14px'}}>Hello World.</div>

//法二
var style = {
  color: '#f00',
  fontSize: '14px'
};

var node = <div style={style}>HelloWorld.</div>;

其实是一样的。

innerHTML

<div dangerouslySetInnerHTML={{__html:"<strong>加黑字体</strong>"}} />

绑定事件

通过React.createElement绑定事件，通过JSX绑定事件

class PageList extends PureComponent{
    propFn(){
        console.log('propFn')
    }
    
    render(){
        function tempFn(){
            console.log('tempFn')
        }
        //通过createElement 绑定事件
        const CreateEle = React.createElement('ul', {
            className: 'my-list',
          },
          React.createElement('li', {
            onClick:()=>{
              console.log('createElement First Text Content')
            }
          }, 'First Text Content'),
          React.createElement('li', null, 'Second Text Content')
        );
        
        return(
            <div>
                {CreateEle}
                <Button onClick={() => console.log(this.props)} type="primary">console</Button>
                <Button onClick={this.propFn} type="primary">propFn</Button>
                <Button onClick={tempFn} type="primary">tempFn</Button>
            </div>
        ) 
    }
}