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