React.js学习版2~

图片

我一个沉迷学习无法自拔的美男子~来更新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的值有三种可能:

  1. 如果当前组件没有子节点,数据类型就是undefined
  2. 如果有一个子节点,数据类型就是object
  3. 如果有多个子节点,数据类型就是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属性的值


第二弹结束~图片

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值