美文网首页
React Props

React Props

作者: K891V | 来源:发表于2017-08-10 14:28 被阅读0次

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
--菜鸟教程
props是在调用组件的时候定义的,通过this.props来获取的。

<div id="demo"></div>
<script type="text/babel">
    var Prop = React.createClass({
        render:function(){
            return <p>这是一个基础的{this.props.prop}</p>
        }
    });
    ReactDOM.render(
        <Prop prop='props'/>,
        document.getElementById('demo')
    );
</script>

输出结果:这是个一个基础的props

关于props,有默认值的。可以通过 getDefaultProps() 方法为 props 设置默认值。

var Prop = React.createClass({
        getDefaultProps:function(){
            return {
                prop:'props',
                end:'!!!',
                num:1234567890
            }
        },
        render:function(){
            return <p>这是一个基础的{this.props.prop}{this.props.end}再来段数字{this.props.num}</p>
        }
    });
    ReactDOM.render(
        <Prop/>,
        document.getElementById('demo')
    );

输出结果:这是一个基础的props!!!再来段数字1234567890

通过两次的对比,可以看出来使用方法,在getDefaultProps()方法内,return的是个对象,写法就是js的对象写法。
虽然不能改变props但是我们可以通过state和props组合的方式。来改变现实的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
    <title></title>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var PropsName = React.createClass({
    render:function(){
        return <p>{this.props.name}</p>
    }
});
var PropsSite = React.createClass({
    render:function(){
        return <p>{this.props.site}</p>
    }
});
var PropsOut = React.createClass({
    getInitialState:function(){
        return{
            abc:true,
            name:'多幸运',
            site:'http://www.jinyingjie.com',
            nameA:'童话',
            siteA:'http://m.jinyingjie.com'
        }
    },
    dbClick:function(event){
        this.setState({abc:!this.state.abc})
    },
    render:function(){
        var name = this.state.abc?this.state.name:this.state.nameA;
        var site = this.state.abc?this.state.site:this.state.siteA;
        return(
            <div>
                <PropsName name={name}/>
                <a href={site}><PropsSite site={site}/></a>
                <button type='button' onClick={this.dbClick}>点击切换歌名</button>
            </div>
        );
    }
});
ReactDOM.render(
    <PropsOut/>,
    document.getElementById('demo')
);

</script>
</body>
</html>

输出效果:

props1.PNG

点击按钮之后:

props2.PNG

哦啦,react学习告一段落了,因为主要是看看语法,为学习react native打基础,嘿嘿。

相关文章

网友评论

      本文标题:React Props

      本文链接:https://www.haomeiwen.com/subject/itjhrxtx.html