react中的组件-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangyiyang111/article/details/116154699

本文详细介绍了React中的函数组件和类组件的命名规范、基本结构以及如何实现父组件向子组件的数据传递。通过实例展示了如何在函数组件和类组件中定义并使用jsx模板语法，以及在实际渲染过程中的应用。同时，文章还阐述了在React中父子组件通信的基本方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

函数组件

  1.函数组件名首字母必须大写
  2.函数组件中必须要有return 
  3.return的结果又是一个jsx模板内容

父传子:
	父组件: 通过自定义属性进行传值
	子组件: 通过参数的形式接受数据,接收的结果是一个{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入react -->
    <script src="./libs/react.development.js"></script>
    <script src="./libs//react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="app">

    </div>
    <script type="text/babel">
        let msg = '这是头部';
        let tit = '这是新闻列表';
        // 声明了一个函数组件
        /*
        1.函数组件名首字母必须大写
        2.函数组件中必须要有return 
        3.return的结果又是一个jsx模板内容
        */
        function Header(params){
            return <div className="well">
                        <h2>{params.msg}</h2>
                        <p>{params.tit}</p>
                    </div>
        }

        // 书写jsx模板语法
        const div = <div className="alert alert-info">
                            <h1>这是根组件</h1>
                            <Header msg={msg} tit={tit}></Header>
                    </div>
        // 渲染页面
        ReactDOM.render(div,document.querySelector('#app'));
    </script>
</body>
</html>

类组件

 * 1.类组件名首字母必须大写
 * 2.类组件都必须继承自React.Component 基类
 * 3.类组件中系统自动注入了一个方法render   #render方法中写jsx模板语法
 * 4.render方法中必须要有return

父传子:
	父组件: 通过自定义属性进行传值
	子组件: 通过this.props接收数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入react -->
    <script src="./libs/react.development.js"></script>
    <script src="./libs//react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="app">

    </div>
    <script type="text/babel">
    let msg = '新闻首页';
    let list = '新闻列表';
        // 类组件
        /**
         * 1.类组件名首字母必须大写
         * 2.类组件都必须继承自React.Component 基类
         * 3.类组件中系统自动注入了一个方法render   #render方法中写jsx模板语法
         * 4.render方法中必须要有return
        */
        class PageTitle extends React.Component{
            render(){
                console.log(this.props);
                return <div className="well">
                        <h2>{this.props.msg}</h2>
                        <p>{this.props.list}</p>
                    </div>
            }
        }

        // 书写jsx模板语法
        const div = <div className="alert alert-info">
                            <h1>这是根组件</h1>
                            <PageTitle msg={msg} list={list}></PageTitle>   
                    </div>
        // 渲染页面
        ReactDOM.render(div,document.querySelector('#app'));
    </script>
</body>
</html>