React.js学习版2~

最新推荐文章于 2018-02-26 21:53:32 发布

你看起来很好玩

最新推荐文章于 2018-02-26 21:53:32 发布

阅读量516

点赞数 1

分类专栏： react 文章标签： react

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我一个沉迷学习无法自拔的美男子~来更新react学习第二弹了！

this.props.children
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。

var NodesList = React.createClass({
    render: function() {
        return (
            <ol>
            {
                React.Children.map(this.props.children, function (child) {
                    return <li>{child}</li>;
                })     
            }
            </ol>
        );
    }
});

ReactDOM.render(
    <NodesList>
        <span>hello</span>
        <span>world</span>
    </NodesList>,
    document.getElementById('box')
);

上面代码中的NodeList组件中有两个span结点，它们都可以通过this.props.children读取。
这里需要注意的是：this.props.children的值有三种可能：

如果当前组件没有子节点，数据类型就是undefined
如果有一个子节点，数据类型就是object
如果有多个子节点，数据类型就是array

React提供一个工具方法React.Children来处理this.props.children。我们可以用React.Children.map来遍历子节点，而不用担心this.props.children的数据类型是undefined还是object

PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

var data = "最帅！";

var MyTitle = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired,
    },

    render: function() {
        return <h1> {this.props.title} </h1>
    }
});

ReactDOM.render(
    <MyTitle title={data}  />,
    document.getElementById('box')
);

getDefaultProps方法可以用来设置组件属性的默认值

var MyTitle = React.createClass({
    getDefaultProps: function() {
        return {
            title: 'Hello World'
        };
    },
    render: function() {
        return <h1>{this.props.title}</h1>
    }
});
ReactDOM.render(
    <MyTitle  />,
    document.getElementById('box')
)

获取真实的DOM节点

组件并不是真实的DOM节点，而是存在与内存之中的一种数据结构，叫做虚拟DOM（virtual DOM）。只有当它插入文档之后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实的DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。
如果需要从组件当中获取真实的DOM节点，这个时候就要用到ref属性

var MyComponent = React.createClass({
    handleClick: function() {
        this.refs.myTextInput.focus();
    },
    render: function() {
        return (
            <div>
                <input type="text" ref="myTextInput" />
                <input type="button" name="" value="Focus" onClick={this.handleClick} />
            </div>
        )
    }
});
ReactDOM.render(
    <MyComponent  />,
    document.getElementById('box')
);

上面这段代码可以理解为当你点击focus按钮时，input框会聚焦那么下面的代码会给你更直观的感受

var MyComponent = React.createClass({  
    handleClick: function(event) {  
        var index = event.target.value;  
        if(index >= 1 && index <= 10) {  
            //找到对应的输入框并将焦点设置到里面  
            var refName = "input" + index;  
            //var inputDOM = React.findDOMNode(this.refs[refName]);  
            var inputDOM = this.refs[refName];
            inputDOM.focus();  
        }  
    },  
    render: function() {  
        var inputs = [];  
        for(var i = 1; i <= 10; i++) {  
            inputs.push(<div><li><input type="text" ref={"input" + i}/></li><br/></div>);  
        }  
        return (  
            <div>  
                <label htmlFor="input" >在这里输入下面任意输入框的索引，光标会自动定位到输入框内：</label>  
                <input type="text" id="input" onChange={this.handleClick}  />  
                <hr />  
                <ol>  
                    {inputs}  
                </ol>  
            </div>  
        )  
    }  
});  
ReactDOM.render(  
    <MyComponent  />,
    document.getElementById('box')
);

上面的代码中，组件MyComponent的子节点有一个文本输入框，用于获取用户的输入。这是就必须获取真实的DOM节点，虚拟DOM是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref属性，然后this.refs.[refName]就会返回这个真实的DOM节点。
需要注意的是，由于this.refs.[refName]属性获取的是真实DOM，所以必须等到虚拟DOM插入文档之后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实DOM发生Click事件之后，才会读取this.refs.[refName]属性。

官方解释：ref属性
React支持一种非常特殊的属性，你可以用来绑定到render()输出的任何组件上去，这个特殊的属性允许你引用render()返回的相应的支撑实例(Backing instance)。这样就可以确保在任何时间总能拿到正确的智力
给input设置标签ref属性有什么用途？
在典型的事件处理代码中，通过this.refs获取真诚实力，就想这样：this.refs.input 其中“input”即为给input设置的ref属性的值

第二弹结束~