02月07, 2017

react笔记

今年有一些计划要完成,react就是其中之一。

去年看了一些react的文章,写了一些小demo,终究没有太深入。所以这次狠下心来,按书本上的东西,自己敲上一遍再说。

react脚手架,我用了create-react-app,提示warning还是蛮强大的。

react最简单的写法,莫过于如下的写法:

const App = () => (
    <div>
      123
    </div>
)

export default App;

当然我们在用的时候,显然不会这么简单。比如说:

<App prop1="" prop2="" />

甚至可能会有children:

<App  prop1="123" prop2="456">
    <div>子元素</div>
</App>

那么如何在组件中取到prop1prop2以及App标签内的结构呢?

const App = ({prop1, prop2, children}) => (
    <div>
      123
    </div>
)

export default App;

函数里面的参数就是props属性对象:

{
     prop1: "123",
     prop2: "456",
     children: "<div> 123 </div>"
}

在JSX写法中,容易踩以下两个坑:

  • class属性、for属性,需要改为className、htmlFor
  • boolean属性,要传flase时,必须使用属性表达式

针对第二点,我们看一下下面的例子:

const App = ({checked}) => (
    <div>
      <div data-xx="2" a="1" data-checked={checked}>纯粹333。。。</div>
      <input type="checkbox" checked={checked} />
    </div>
)
export default App;

我们在使用时,如果写成这样的:

<App checked="false" />

会发现div的data-checked是正确的,就是false,但checbox却被选中了。

正确的写法如下:

<App checked={false} />

ES6的React组件写法大概如下:

class App extends Component {
    constructor(props) {
        super(props);
    }
    static defaultProps = {
        color: "red"
    }
    render() {
        return (
            <div className={`btn btn-${this.props.color}`}>Hello world</div>
        )
    }
}

接下去,就是如何遍历children了。代码简单如下:

const App = ({children}) => {

    let liItems = [];

    /*
    for(var i = 0; i < 5; i++) {
        liItems.push(<li key={i}>{i}</li>)
    }
    */
    React.Children.map(children, (child) => {
        liItems.push(child);
    })

    return (
        <ul>
            {liItems}
        </ul>
    )
}
<App>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</App>

修改children的prop,必须要通过React.cloneElement来实现,简单代码如下:

React.cloneElement(child, {
    classPrefix,
    isActive,
    children: child.props.children,
    key: `tabpane-${order}`
});

React - 修改children(上)

(未完)

本文链接:www.my-fe.pub/post/about-react.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。