React记录（190）

发表于   |   分类于

1. this.props.children
它是链表没错(当只有一个时，是string之类元素)

1
2
3
4
React.Children.map(this.props.children, function (child) {
        return <li>{child}</li>;
        })
//每个child是一个ReactElement的object，可能ReactElement有默认的隐式处理吧_shadowChildren之类吧！

此句，一直不明白为何object能当字符处理。

2. markdown显示
使用remarkable库，可以支持markdown格式显示语句。

但是不能直接render解析（虽然表面看是对的），好像react做了XSS 攻击的保护。

解析后的语句只能放入节点属性中：dangerouslySetInnerHTML={ __html: md.render(this.props.children.toString()) }

值得注意的是，它支持的markdown语法是最新的，也就是说有些语法严格和空格有关(如# d必须空格)

3. react key添加
我在用map的时候，被警告必须加key。react对dom做遍历的时候，会根据data-reactid生成虚拟dom树。如果你没有手动的添加unique constant key的话，react是无法记录你的dom操作的。

4. createClass函数问题
createClass创建的方法

rawMarkup: function() {}

要this.rawMarkup()才能访问到；晕，刚居然没注意。

5. eslint安装
eslint和eslint插件必须全部 全局安装。局部安装老是报错，无法找到插件。

6. react-es6
这个由于很多，只说下属性的设置；
es5对类属性设置是用： render: function(){}

es6对类属性设置是用：render() {}

居然看半天没发现。
http://blog.csdn.net/wangzengdi/article/details/50719395

7. 无状态的函数式组件
除了正统的rn创建外；还有个创建组件的方法

声明：

1
2
3
4
5
6
7
const Pane = (props) => <div>{props.children}</div>;
Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};
//使用：
<Pane label="asdf" />

注意俩点：

  1. 不能有生命周期方法
  2. 不能有ref（实例dom属性，React.findDOMNode）

8. children isrequired
children: React.PropTypes.element.isRequired

9. react全家桶
webpack和其它基本已经知道了；给个前端ui库吧：reactui库有个ant design 和material ui、 boostrap

flux网上说文档又臭又长，转redux

// //