React--组件

最新推荐文章于 2024-11-07 10:38:40 发布

qq_29069777

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量50

点赞数

分类专栏：前端文章标签： react初探 react组件 props proptypes html

原文链接：https://www.mk2048.com/blog/blog.php?id=hh0c0c2jaaaa&title=React--%E7%BB%84%E4%BB%B6

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<!-- React 允许将代码封装成组件（component），
然后像插入普通 HTML 标签一样，在网页中插入这个组件。 -->
<html>
<head>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render:function () {
                return <h1>hello {this.props.name}</h1>
            }
        })

        ReactDOM.render(
           <HelloMessage name="Helen" />,  
           document.getElementById('example') 
        );
    </script>
</body>

</html>

注意

<HelloMessage name="Helen" />

是个半闭合标签，少

会报错

React的props

React中的每一个组件，都包含有一个属性（props），在组件内部，我们可以通过this.props获取属性对象。

组件如下：

React.render(  
    <HelloWorld name="Jack"/>,  //name属性的值是“jack”
    document.getElementById('container')  
);

属性使用方法：

1.直接调key/value

var HelloWorld = React.createClass({  
    render:function(){
        return {
            <div> hello{this.props.name} </div>
        }
    }
});

2.延展属性

用{...props}方法

<div id="example"></div>
    <script type="text/babel">
    // 创建组件  React.createClass
        var HelloMessage = React.createClass({
            render:function () {
                return <h1>hello {this.props.name1},{this.props.name2}</h1>
            }
        })

        var props = {
            name1:"andy",
            name2:"tom"
        }

        ReactDOM.render(
           <HelloMessage {...props}/>,
           document.getElementById('example') 
        );
        
    </script>

3.调用组件的setProps函数来指定属性

    <div id="example"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render:function () {
                return <h1>hello {this.props.name}</h1>
            }
        })

        var instance  = React.render(  // 为什么不是ReactDOM.render？？
            <hello />,
            document.getElementById('example');
        )
        
        instance.setProps({name:'jack'});
        
    </script>

自己设置了组件的属性值。