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({ ... });