html与js项目引入react框架之渲染方式

最新推荐文章于 2024-01-02 16:33:17 发布

麦圈先生

最新推荐文章于 2024-01-02 16:33:17 发布

阅读量957

点赞数 1

分类专栏： react 文章标签： react.js html5 javascript css 前端框架

本文链接：https://blog.csdn.net/m0_51062476/article/details/120063049

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、react的引入

需要引入三个文件

1.react.js

https://unpkg.com/react@17/umd/react.development.js

https://unpkg.com/react-dom@17/umd/react-dom.development.js

2.babel.js（因为react是xml编写的，所以需要用babel编译才不会报错）

https://unpkg.com/@babel/standalone/babel.min.js

以上都可以直接引入或者打开连接下载js代码，我是将代码下载本地做演示

<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>

一定要按照上面的顺序，否则会报错

二、函数式写法（无状态组件）

函数式写法一般用在页面渲染，里面没有生命周期之类所以又叫做无状态组件

1.初级简单渲染

<!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 rel="stylesheet" href="./static/antd.css">
</head>

<body>
    <div id="app"></div>
</body>
<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>
<script src="./static/antd.js"></script>
<script type="text/babel">
    ReactDOM.render(<h1>Hello，world</h1>, document.getElementById('app'))
</script>

</html>

Hello，world会直接显示到页面上

2.分离式写法渲染

<script type="text/babel">
    var MyApp = () => {
        return <div>你好呀</div>
    }
    ReactDOM.render(MyApp(), document.getElementById('app'))
</script>

3.分离式创建实例渲染

<script type="text/babel">
    var MyApp = (props) => {
        return <div>
            <h1>{props.title}</h1>
            <h2>{props.username}</h2>
        </div>
    }

    var App = MyApp({
        title: '谁是最帅的程序员？',
        username: '麦圈先生'
    })

    ReactDOM.render(App, document.getElementById('app'))
</script>

4.标签写法

<script type="text/babel">
    function App() {
        return <div>我是标签写法</div>
    }
    ReactDOM.render(<App />, document.getElementById('app'))
</script>

5.标签属性传递

<script type="text/babel">
    function App(props) {
        return <div>{props.title}</div>
    }
    ReactDOM.render(<App title="标签属性传递" />, document.getElementById('app'))
</script>

三、class类组件

1.class组件基本使用渲染

<script type="text/babel">
    class MyApp extends React.Component {
        render() {
            return (
                <div>我是class组件</div>
            )
        }
    }
    ReactDOM.render(<MyApp />, document.getElementById('app'))
</script>

2.参数传递

组件使用时我们用属性传参，在组件内部用this.props来接收

<script type="text/babel">
    class MyApp extends React.Component {
        render() {
            return (
                <div>{this.props.title}</div>
            )
        }
    }
    ReactDOM.render(<MyApp title='我是组件使用属性传递参数' />, document.getElementById('app'))
</script>

四、嵌套式父子组件渲染

1.嵌套式父子组件基本渲染

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header></Header>
                    <Content></Content>
                    <Footer></Footer>
                </div>

            )
        }
    }
    // 子组件创建
    class Header extends React.Component {
        render() {
            return (
                <div>
                    <h1>我是头部</h1>
                </div>
            )
        }
    }
    class Content extends React.Component {
        render() {
            return (
                <div>
                    <h2>我是内容</h2>
                </div>
            )
        }
    }
    class Footer extends React.Component {
        render() {
            return (
                <div>
                    <h3>我是底部</h3>
                </div>
            )
        }
    }

    ReactDOM.render(<Home />, document.getElementById('app'))
</script>

2.嵌套式父传子参数传递渲染

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                    <Content title={this.props.content}></Content>
                    <Footer title={this.props.footer}></Footer>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        render() {
            return (
                <div>
                    <h1>{this.props.title}</h1>
                </div>
            )
        }
    }

    class Content extends React.Component {
        render() {
            return (
                <div>
                    <h2>{this.props.title}</h2>
                </div>
            )
        }
    }
    class Footer extends React.Component {
        render() {
            return (
                <div>
                    <h3>{this.props.title}</h3>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" content="我是参数传递的内容" footer="我是参数传递的底部" />, document.getElementById('app'))

</script>

五、style及class通过对象方式引入

1.style样式引入：样式引入一定要在标签内加大括号{}，否则报错

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 创建样式对象变量
    var headerStyle = {
        backgroundColor: "red",
        color: "green"
    }

    // 子组件创建
    class Header extends React.Component {
        render() {
            // 样式引入一定要在标签内加大括号{}，否则报错
            return (
                <div >
                    <h1 style={headerStyle}>{this.props.title}</h1>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

2.class渲染样式

创建css文件style.css

.styleClass {
    background-color: red;
    color: blue;
}

html中引入css文件

react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

麦圈先生

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html与js项目引入react框架之渲染方式

一、react的引入需要引入三个文件1.react.jshttps://unpkg.com/react@17/umd/react.development.jshttps://unpkg.com/react-dom@17/umd/react-dom.development.js2.babel.js（因为react是xml编写的，所以需要用babel编译才不会报错）https://unpkg.com/@babel/standalone/babel.min.js以上都可以直接引入或者打
复制链接

扫一扫