react02--

最新推荐文章于 2023-01-25 19:34:00 发布

几度风雨见丹心

最新推荐文章于 2023-01-25 19:34:00 发布

阅读量82

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/mmwanwen/article/details/111737533

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、使用react方法一
在单页HTML文件中，<head>标签内引入cdn

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2、jsx–>在JS中写HTML这种语法叫JSX
声明组件-函数声明方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入react react-dom babel -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<!-- 生产环境中不建议使用 -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <!-- babel转换 type="text/babel -->
    <script type="text/babel">
        //声明组件-函数声明方式
        function MyCom(props){
            //props是父组件给子组件传参存放的位置,是一个对象
            //变量渲染
            let test = 'test';
            //返回的是模板
            return (
                <div>
                    //如果在jsx中想要访问外部的变量,加{},如果不加,访问的是变量
                    <h1>hello{test}</h1 >
                    <h2>world{props.stu.name}</h2>
                </div>
            );
        }
        //组件的使用,render将组件渲染到容器中,()里写<组件名 />,相当于单标签
        //调用了ReactDOM的render方法，将MyCom组件渲染到container中
        //ReactDOM.render(<MyCom />,document.getElementById('contatiner'));
        //模板应用到container中
        let student = {
            name:'zhangsan'
        };
        //给子组件传参
        //父组件给子组件传参典型例子:在子组件调用的时候,写属性,写的属性就是传递给子组件的数据
        ReactDOM.render(<MyCom stu={student}/>,Document.getElementById('container'));
        //组件的重复使用
        ReactDOM.render(<MyCom stu={student}/>,Document.getElementById('one'));
        //写one的渲染
        //temp是React元素
        // const temp = <h3>temp</h3>;
        // console.log(temp);
        //render的第一个参数是react元素
        // ReactDOM.render(temp,document.getElementById('one'));
    </script>
</head>
<body>
    <div id="container"></div>
    <div id="one"></div>
</body>
</html>

总结：
组件 – 模板，可以在DOM的任何地方使用，也可以重复使用。

2、列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- babel转换 type="text/babel -->
    <script type="text/babel">
        //列表渲染  循环渲染-for渲染
        let arr = ['苹果','葡萄','桃子'];
        function MyCom(props){
            return(
                <div>
                    <ul>
                        {
                            //如果访问变量要用{},如果要在JSX中写JS代码,要用{}
                            props.arr.map((item,index)=>{
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            );
        }
        //使用组件
        ReactDOM.render(<MyCom arr={arr}/>,document.getElementById('root'));
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

3、条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- babel转换 type="text/babel -->
    <script type="text/babel">
        function IsCom(props){
            // console.log(props);
            //使用解构获取属性
            let {show,user,temp} = props;
            if(show&&user){
                //布尔类型的true在页面上不显示
                return <div><h2>已登录</h2>{temp}-----{Array.isArray(temp)+''}</div>;
            }
            return <h2>请登录{temp}</h2>;
        }
        let show = true;
        let user = {
            name:'zhangsan'
        };
        ReactDOM.render(<IsCom show={show} user={user} temp={[1,2,3]}/>,document.getElementById('root'));
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

4、Fragment —> 允许将子列表分组，而无需向DOM添加额外节点

class Table extends React.Component {
	render(){
		renter (<tabel><tr><column /></tr></table>)
	}
}
如果Column为如下代码则无效，因为tr标签中不能插入div标签
class Column extends React.Component{
	render(){
		return (<div><td>hello</td><td>world</td></div>)
	}
}
改为如下：
return (<React.Fragment><td>hello</td><td>world</td></React.Fragment>)

5.类组件和类组件的传参

组件声明有两种方式:函数组件,类组件。类组件比函数组件更加丰富。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- babel转换 type="text/babel -->
    <script type="text/babel">
        //组件声明有两种方式:函数组件,类组件
        //props
        class MyCom extends React.Component{
            constructor(props){
                //props在类组件中props存在于constructor中
                super(props);
                //state 本组件的数据模型,管理状态
                //this是当前创造出来的这个组件对象
                // console.log(this);
                //有状态的组件,函数组件没有这个功能
                this.state = {
                    msg:'state中的msg'
                };
            }
            //模板的渲染,需重写,如果使用类组件,内部必须有render方法
           render(){
            let msg = 'hello';
            return (
                <div>
                    {/*JSX的多行注释,访问render内部变量*/}
                    <h2>{msg}</h2>
                    {/*访问props中变量*/}
                    <h2>{this.props.test}</h2>
                    {/*访问state中变量*/}
                    <h2>{this.state.msg}</h2>
                </div>
                );
           } 
        }
        let test = 'test1';
        ReactDOM.render(<MyCom test={test}/>,document.getElementById('root'));
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

6、组件的嵌套使用和传参

几度风雨见丹心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react02--

1、使用react方法一在单页HTML文件中，<head>标签内引入cdn<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>&
复制链接

扫一扫