React 語法

一、JavaScript XML

JSX = JavaScript XML，是一個看起來很像 XML 的 JavaScript 語法擴展。
JSX 不是模板，是JS語法自己，有更多的擴展。
JSX 組件通常以大寫字母開頭。
JSX 屬性名稱採用駝峯式。
JSX 屬性值接受一個函數，而不是字符串。
JSX return false; 不會阻止組件的默認行爲，須要調用 e.preventDefault();

 

 二、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"))

 

三、 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);

 

 二、React.createElement，使用對象屬性

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

 

三、使用React表達式，()

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

　　　　

四、React.createClass 建立模板，備註：廢除　　

 

五、ReactDOM.render 元素渲染

ReactDOM.render 用於將模板轉爲HTML語言，並插入指定的DOM節點。

語法：ReactDOM.render(element, container, [callback])

該方法接收兩個參數：第一個是建立的模板，第二個是目標元素

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

　　

六、標籤都須要有閉合

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

 

七、class命名，須要className

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

 

八、在jsx裏寫多個標籤能夠用括號包起來(必需要有一個根元素)

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

 

九、Javascript表達式，使用{}標識內部是JS表達式

JSX是HTML和JavaScript混寫的語法，當遇到<，JSX就當HTML解析，遇到{就當Javascript解析

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

 

十、style 屬性

style屬性是用兩個 { 包含的，最外層的 { 表示內部是一個JS表達式，裏面的 { 表示是一個JS對象字面量

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

 

十一、事件綁定屬性的命名採用駝峯式寫法，而不是小寫

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

 

十二、href={}，及href內部須要使用單引號

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

 

1三、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 }));

1四、註釋 (Comments)

1）單行註釋，用 {}

{/* 單行註釋 */}

2）多行註釋，用 /**/

/* 
多
行
注
釋
*/

3）行尾註釋，用 //

var name = "Hello World";    //行尾註釋

 

1五、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 }} /> }

 

1六、MAP循環
React經過循環遍歷出生成的組件集合，在循環時必定要加上key值

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

1七、Loop循環

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

render(){
	return (<tbody>{rows}</tbody>);
}

 

1八、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>
      )
    }
  }
  

   

1九、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'));

 

2一、表單

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>

 

 2二、表格

<tr>必須爲<tbody>的子級

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

 

2三、多個組件

{/*定義函數*/}
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} />