• React 语法


    1、JavaScript XML

    JSX = JavaScript XML,是一个看起来很像 XML 的 JavaScript 语法扩展。
    JSX 不是模板,是JS语法本身,有更多的扩展。
    JSX 组件一般以大写字母开头。
    JSX 属性名称采用驼峰式。
    JSX 属性值接受一个函数,而不是字符串。
    JSX return false; 不会阻止组件的默认行为,需要调用 e.preventDefault();

     2、React.Component 组件,ES6写法

    class MyComponent extends React.Component{
      render(){
        return <div>Customer Component:{this.props.name}</div>
      }
    }
    
    React.render(<MyComponent name="Hello World"/>, document.getElementById("root"))
    

    3、 React.createElement ,创建元素

    语法:React.createElement(type,[props],[...children])

    创建一个react元素;第一个参数为模板标签名称,第二个参数为模板的props,第三个参数为模板文本内容

    1),document.createElement,JavaScript原生方法

    const h1 = document.createElement('h1');
    h1.className='title';
    h1.innerText='Hello World';
    document.getElementById('example').appendChild(h1);
    

     2、React.createElement,使用对象属性

    const h1 = React.createElement("h1", {className: "title"}, "Hello World");
    ReactDOM.render(h1, document.getElementById('example'));
    

    3、使用React表达式,()

    ReactDOM.render((<h1 className="title">Hello World</h1>), document.getElementById("example"));
    

        

    4、React.createClass 创建模板,备注:废除  

    5、ReactDOM.render 元素渲染

    ReactDOM.render 用于将模板转为HTML语言,并插入指定的DOM节点。

    语法:ReactDOM.render(element, container, [callback])

    该方法接收两个参数:第一个是创建的模板,第二个是目标元素

    const element = <h1>Hello World</h1>;
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
    

      

    6、标签都需要有闭合

    <img  />
    <p>Hello world<p>
    

    7、class命名,需要className

    <input className='header' maxLength="255" />
    

    8、在jsx里写多个标签可以用括号包起来(必须要有一个根元素)

    var Header = (<div>
        <p>hello</p>
        <p>world</p>
    </div>)
    

    9、Javascript表达式,使用{}标识内部是JS表达式

    JSX是HTML和JavaScript混写的语法,当遇到<,JSX就当HTML解析,遇到{就当Javascript解析

    var a = 'hello world';
    let b = <div>{a}</div>
    

    10、style 属性

    style属性是用两个 { 包含的,最外层的 { 表示内部是一个JS表达式,里面的 { 表示是一个JS对象字面量

     <div style = {{'background':'red'}}>hello world</div>
    

    11、事件绑定属性的命名采用驼峰式写法,而不是小写

    <button onClick={handle}> hello world</button>
    

    12、href={},及href内部需要使用单引号

    <a href={'show.html?id=' + this.state.id}>hello world</a>
    

    13、props 与 state 的区别

    props 是组件对外的接口,state 是组件对内的接口
    state是可变的,是一组用于反映组件UI变化的状态集合;
    props对于使用它的组件来说,是只读的,要想修改props,只能通过该组件的父组件修改;
    
    props的使用
    <Hello data={id:0} />
    

     state的使用

    this.setState({id: 0}); 
    
    this.setState((prevState, props) => ({ id: props.id }));
    

    14、注释 (Comments)

    1)单行注释,用 {}

    {/* 单行注释 */}
    

    2)多行注释,用 /**/

    /* 
    多
    行
    注
    释
    */
    

    3)行尾注释,用 //

    var name = "Hello World";    //行尾注释

    15、HTML转义

    React 默认会转义所有字符串,使用 __html 进行转义

    var content='<strong>Hello World</strong>';
    React.render(
        <div>{{__html:content}}</div>,
        document.body
    );
    

    显示 state html 内容 

    {<div dangerouslySetInnerHTML={{ __html: this.state.data.content }} /> }
    

    16、MAP循环
    React通过循环遍历出生成的组件集合,在循环时一定要加上key值

    {arr.map(function(it,i) {
            return <span key={i}> {it} </span>
    })}
    

    17、Loop循环

    var rows = [];
    for (var i=0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    }
    
    render(){
    	return (<tbody>{rows}</tbody>);
    }
    

    18、IF-ELSE

    在JSX中是不可以直接在{}中加入if-else的

    • 使用 三元操作符 来替代 if-else,或者将复杂的操作在JSX外面使用JS去处理
    • 使用闭包自执行函数
      class Hello extends React.Component {
        render (){
          return(
            <div>
              { this.props.loggedIn ?
                  <span>
                    <h2>{ this.props.name }</h2>
                    <p>Hello World</p>
                  </span>
                  :
                  <h2>Hello Message</h2>
              }
            </div>
          )
        }
      }
      

    19、Switch-Case

    return (
      <section>
        <h1>Color</h1>
        <h3>Name</h3>
        <p>{this.state.color || "white"}</p>
        <h3>Hex</h3>
        <p>
          {(() => {
            switch (this.state.color) {
              case "red":   return "#FF0000";
              case "green": return "#00FF00";
              case "blue":  return "#0000FF";
              default:      return "#FFFFFF";
            }
          })()}
        </p>
      </section>
    );
    

    20、返回数组

    const arr = ['Hello', 'World'];
    
    const Arr = () => {
      return arr.map((item, index) => {
        return <p key={index}>{item}</p>
      })
    }
    
    ReactDOM.render(<Arr />, document.getElementById('root'));
    

    21、表单

    this.setState({
        [e.target.name]: e.target.value
    })

     表单示例:

    <script type="text/jsx">
        class MyForm extends React.Component { 
        constructor(props){ 
            super(props); 
            this.state = { 
                sex:0,
                age:1
            };
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this); 
        } 
        handleChange(e){ 
            this.setState({ 
                    [e.target.name] : e.target.value
            });
        } 
        handleSubmit(e){
            e.preventDefault();
            var arr = [];
            for (var item in this.state){
                arr.push(item + '=' + this.state[item]);                
            }
            result.innerText = arr.join();
        } 
        render(){ 
            return(
                <form onSubmit={this.handleSubmit}>
                    <p>性别:<input type='text' name="sex" onChange={this.handleChange} value={this.state.sex} /></p>
                    <p>年龄:<input type='text' name="age" onChange={this.handleChange} value={this.state.age} /></p>
                    <p><input type='submit' value='submit' /></p>
                    <p>表单值:<span id="result"></span></p>
                </form> 
                )
            } 
        }
    
        ReactDOM.render(
            <MyForm />,
            document.body.appendChild(document.createElement('div'))
        );
    </script>
    

     22、表格

    <tr>必须为<tbody>的子级

    <table>
    	<tbody>
    	<tr>
    		<td>Hello World</td>
    	</tr>
    	</tbody>
    </table>
    

    23、多个组件

    {/*定义函数*/}
    const Hello = (props) => {
        return (
        <div>
            <h1>{props.name}</h1>
        </div>
        )
    }
    {/*定义组件*/}
    class Form1 extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
            <Hello name={this.props.name} />
            );
        }
    }
    {/*元素渲染*/}
    ReactDOM.render(
        <Form1 name="Hello World" />,
        document.getElementById('form1')
    );
    

    一个简单的无状态组件,只受属性控制

    const Button = props => (
      <button onClick={props.onClick}>
        {props.text}
      </button>
    );
    

     调用上面Button组件
    <Button onClick={this.handleClick} text="Hello World" />

    容器组件 X 展示组件

    const List = props =>
    <ul>
        {props.data.map(d => (
          <li>{d.title}</li>
        ))}
    </ul>
    

     调用上面Button组件
    <List data={this.state.data} />

      

  • 相关阅读:
    javascript中构造函数与普通函数的区别还有关于“new”操作符的一些原理
    一个简单的jquery左右列表内容切换应用
    Spring学习笔记(三)之装配Bean
    Maven引入jar的总结
    在使用hibernate的getHibernateTemplate()时怎么让控制台输出封装好的SQL? 怎么用日志打印出来?
    Spring学习笔记(二)之装配Bean
    spring学习笔记(一) Spring概述
    ResourceBundle读取文件学习
    如何从结果集中遍历得到一条条的数据?
    response与request回顾学习
  • 原文地址:https://www.cnblogs.com/sntetwt/p/10965423.html
Copyright © 2020-2023  润新知