React组件

最新推荐文章于 2024-09-25 10:46:15 发布

原创最新推荐文章于 2024-09-25 10:46:15 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React组件

React 专栏收录该内容

4 篇文章

订阅专栏

React轻巧源于React组件的思想。就像没有函数的概念之前，计算一个长方形的面积，每次都是相同的计算长和宽的乘积，然后输出。React允许我们自定义组件，在以后的工作过程中，我们想渲染不同的组件，都可以自定义，通过render函数返回DOM元素节点。

React组件示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var Hbk = React.createClass({
        render : function(){
            return (<h1>Huang Bao Kang</h1>);
        }
      });
      ReactDOM.render(
        <Hbk></Hbk>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

这里写图片描述

注意点：组件名以大写字母开头，HTML标签用小写，而且render返回的DOM元素最外层只能是一个节点，否则会报错。

需要向组件传递参数，可以使用 this.props 对象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var Hbk = React.createClass({
        render : function(){
            return (<h1>黄宝康 love {this.props.lover}</h1>);
        }
      });
      ReactDOM.render(
        <Hbk lover="张露露"></Hbk>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>