react基本知識點合集

妹子UI里面有React的相關組件與用法：http://amazeui.org/react/components

React官方網站：https://facebook.github.io/react/docs/getting-started.html

React中文網站：http://www.css88.com/react/docs/getting-started.html

1、react兩種注釋：
這個是在react里面的。
{/* 要注釋的內容 */}
在代碼行里面用
/* */

2、html中的class在react中用className，html中的for在react中用htmlFor，行內樣式書寫規范style={{color:'red'}}

3、添加自定義屬性之前添加data-前綴：<div data-custom-attribute="foo" />

4、react中的表達式的用法：

　　在className中直接可以判斷什么狀態用什么樣式：className={2 > 1 ? 'class-a' : 'class-b'}

　　在模塊中直接根據條件來判斷具體用哪一個組件：{window.isLoggedIn ? <Nav /> : <Login />}

5、html轉義：后台傳過來的數據帶頁面標簽的是不能直接轉義的，具體轉義的寫法如下：

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

6、傳播屬性和延伸屬性：

如果提前知道屬性的話直接寫就好了，用傳播屬性即可：var component = <Component foo={x} bar={y} />;

如果屬性是后來動態添加的話上面的那種形式就不太適合了，需要用延伸屬性：

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
//或者
var props = { foo: x, bar: y };
var component = <Component { ...props } />;

7、在React中大多以JSX方式書寫。JSX是一個語法糖，最終都會被解析為純JavaScript代碼。React雖然也可以直接使用javascript書寫，但是官網推薦支持的是JSX方式。要把帶有JSX語法的代碼轉化為純Javascript代碼，在script標簽中要加上type="text/jsx"，並引入JSXTransformer.js文件即可。這種方式不適用於生產環境，生產環境需要提前編譯轉換好。用npm全局安裝react-tools即可：npm install -g react-tools

8、組件開發：開發組件的時候可以將相關的組件關聯在一起。如父組件里面有多個子組件的情況，可以如下方式操作：　　

var Form = MyFormComponent;
 
var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

//這樣你只需將子組件的ReactClass作為其父組件的屬性：
var MyFormComponent = React.createClass({ ... });
 
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });