react组件中的属性(props)

责编:menVScode 2017-06-17 23:11 阅读(791)

        react组件中属性的写法

        1、<Demo 属性=属性值 />,属性值的内容可以是:字符串,对象{},数组{[1,2,3]},变量{var}。

var Demo = React.createClass({
    render:function(){
        return <div>{this.props.title}</div>
    }
});
ReactDOM.render(
    <Demo title={'mvc'}/>,document.getElementById('app')
)

        2、<Demo {…props} />传入多个属性

var Demo = React.createClass({
    render:function(){
        return (
            <div>
                <div>{this.props.title}</div>
                <a {...this.props}>{this.props.href}</a>
            </div>
        )
    }
});
ReactDOM.render(
    <Demo title={'menvscode'} href='http://menvscode.com' />,document.getElementById('app')
)
var Demo = React.createClass({
    render:function(){
        return (
            <div>
                <div>{this.props.title}</div>
                <a {...this.props}>{this.props.href}</a>
            </div>
        )
    }
});
var zhi = {
    href:'http://menvscode.com',
    title:'menvscode',
    target:'_blank'
}
ReactDOM.render(
    <Demo {...zhi} />,document.getElementById('app')
)

        上面两种不同方式写法,表达的是同一个意思。...this.props是一个语法糖,可以将父组件中的全部属性复制子组件上,如果这个标签本身拥有的这个属性,就会将属性显示出来。否则就不显示。比如zhi对象的中的属性,都是a标签本身有的属性,自然都是显示出来。如果其中一个属性是a标签没有的话,渲染后也不会有的。

        

        三、this.props.children

        children没有与组件的属性一一对应,表示组件的所有子节点,一般用于列表比较多。

var List = React.createClass({    render:function(){
        return(
            <ul>
                {
                    React.Children.map(this.props.children,function(child,index){
                        return <li className={index}>{child}</li>
                    })
                }
            </ul>
        )
    }
});
ReactDOM.render(
    <List>
        <h2>1111</h2>
        <h3>2222</h3>
    </List>,
    document.getElementById('app') 
)

        React.Children.map()这个方法是属于React对象下的,之前文章中也讲到过。他可以传入3个参数,上面的例子中this.props.children参数代表组件中的子节点,且数量不确定;第二个参数函数也有参数分别是当前值和其对应的索引值。

        总结:列表项的数量以及内容不确定,在创建模板的时候菜确定情况下可以使用;利用this.props.chilidren从父组件获取需要的内容;利用React.Children.map方法进行children的遍历;

标签: react reactjs props
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码