React.js学习---props

<!DOCTYPE html>
<html>

<head>
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript" src="lib/react.min.js" ></script>
    <script type="text/javascript" src="lib/react-dom.min.js" ></script>
    <script type="text/javascript" src="lib/browser.min.js" ></script>
    <script type="text/babel"  >
        var Hello = React.createClass({
            getDefaultProps:function(){
                return{
                    age:11
                }
            },render:function(){
                <!-- 原始的写法 -->
                <!-- return(
                                         <span  {this.props.name} {this.props.id}>Hello {this.props.name} !</span>
                                     ); -->
                 <!-- jsx...解构的写法 -->
                 <!-- return(
                                          <span  {...this.props}>Hello {this.props.name} !</span>
                                      ); -->
                 <!-- other排除写法 -->
                var {name,...other} = this.props;
                return (
                    <span {...other}>Hello {this.props.name} !</span>
                );
            }
        });
        var property = {
            name:"loser",age:"1",grade:"2",id:"1",'data-action':"run"
        }
        ReactDOM.render(
            <Hello {...property}/>,document.getElementById('main')
        )

        <!-- 当我们要在组件的元素上加上一些属性的时候,我们可以通过{this.props.属性名}从组件的父节点上面获取到该属性,但是当有很多个属性的时候,我们则需要逐条的通过{this.props.属性名}添加各个属性,这就会变得十分的麻烦。所以可以利用jsx的...解构的方法,可以一次性添加上父节点上的属性。注意只能给元素添加一些html标准的属性,如id ,name,其他一些自定义属性比如method 只能用于传递数据并不能显示在真实的dom结构上。other用法:用于排除一些你不想显示在元素的属性,比如上例中{name,...other}就显示除name以外的属性 -->
    </script>
</body>

</html>

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...