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

超、凢脫俗 2022-02-26 06:08 2116阅读 0赞

## React语法 ##

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

### 基本结构 ###

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

[在线编译器][Link 1]

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>
            ) 
        }
    }

[Link 1]: https://babeljs.io/repl