return (
{arr}
);
}
export default App;
数组里边的项为对象时可以作以下修改
const arr = [
{
id: 0,
name: ‘GD’,
age: 18
},
{
id: 1,
name: ‘XGD’,
age: 8
}
];
function App() {
const str = arr.map(item => {
return (
{item.name}
{item.age}
)
})
return
- {str}
}
export default App;
- 设置样式的时候，应该将键值对放置于 {}
const styleObj = {
width: 100,
height: 100,
backgroundColor: ‘green’
};
function App() {
return
样式处理2}
export default App;
-
内联样式默认无法支持伪类及媒体查询样式设置；如需使用需借助第三方的包帮助 — radium
-
导入 Radium 函数将当前需要支持伪类操作的组件包裹之后再导出
import Radium from ‘radium’
const styleObj = {
width: 100,
height: 100,
backgroundColor: ‘green’,
‘:hover’: {
backgroundColor: ‘yellow’
}
}
function App() {
return
样式处理2}
export default Radium(App);
- 通过 Radium 设置媒体查询时，需要将当前组件所渲染的地方使用 StyleRoot 包裹
import Radium from ‘radium’
const styleObj = {
width: 100,
height: 100,
backgroundColor: ‘green’,
“:hover”: {
backgroundColor: ‘yellow’
},
“@media (max-width: 1000px)”: {
width: 300
}
}
function App() {
return
样式处理2}
export default Radium(App);
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
import {StyleRoot} from ‘radium’
ReactDOM.render(
<React.StrictMode>
</React.StrictMode>,
document.getElementById(‘root’)
);
- 案例
import Radium from ‘radium’
const ButtonStyle = {
base: {
width: 150,
height: 40,
fontSize: 20,
background: ‘#ffff’
},
login: {
background: ‘green’
},
logout: {
background: ‘orange’
}
}
const isLogin = false
function App() {
return
<button style={[
ButtonStyle.base,
isLogin ? ButtonStyle.login : ButtonStyle.logout
]}>按钮
}
export default Radium(App);
-
全局外联样式
-
所有组件当中都可以直接进行使用
-
再添加 class 时，需要使用 className
// App.js
function App() {
return <div className={‘box’}>
外联样式
}
export default App;
// Test,js
import React from ‘react’
function Test () {
return <div className={‘box’}>Test.js
}
export default Test
// index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
import Test from ‘./test’
import ‘./style.css’
ReactDOM.render(
<React.StrictMode>
</React.StrictMode>,
document.getElementById(‘root’)
);
-
组件级别的外联样式
-
只有某一个组件可以进行使用
-
组件名.module.css
// Test.module.css
.item {
background-color: red;
width: 200px;
height: 200px;
}
// test.js
import React from ‘react’
import style from ‘./Test.module.css’
function Test () {
return (
Test.js这里使用了自己的样式
)
}
export default Test
-
借助第三方工具在 JS 中编写 CSS
-
(CSS-IN-JS)
-
npm i styled-components
import React from ‘react’
import style from ‘./Test.module.css’
import styled from ‘styled-components’
// 自定义标签
const SectionDiv = styled.div.attrs({
className: ‘box1 box2’
})`
width: 100px;
height: 100px;
background-color: pink;
`
function Test () {
return (
Test.js这里使用了自己的样式
)
}
export default Test
===============================================================
function App() {
return
我就是函数式组件
}
export default App;
-
必须继承 Compnent
-
必须实例化 render
-
组件名称首字母必须大写，在 React 中可以用于区分组件和普通的标记
import React, {Component} from ‘react’
class About extends Component {
render () {
return (
我是类式组件)
}
}
export default About
- 必须有且只能有一个根元素，同时支持占位符（两种方式）
import React, {Component, Fragment} from ‘react’
class About extends Component {
render () {
return (
// 方式一
我是类式组件
// 方式二
<>我是类式组件</>
)
}
}
export default About
==============================================================
在函数组件内可以接到外部的数据，内部直接访问即可
import About from ‘./About’
function App() {
return
<About name={‘GD’} age={100}/>
}
export default App;
// About.js
import React from ‘react’
function About(props) {
console.log(props);
return (
{props.a}
{props.b}
)
}
export default About
import About from ‘./About’
const obj = {
name: ‘rookie’,
age: 18
}
function App() {
return
<About {…obj}/>
}
export default App;
// About.js
import React from ‘react’
function About({name, age}) {
return (
{name}
{age}
)
}
export default About
类式组件内部的内部存在一个 props属性，外部传递的数据都放在这里保存，我们可以直接进行使用
import Header from ‘./Header’
function App() {
return
}
export default App;
// Header.js
import React, { Component } from ‘react’
class Header extends Component {
render() {
return (
{this.props.name}
{this.props.age}
)
}
}
export default Header
import About from ‘./About’
const obj = {
name: ‘rookie’,
age: 18
}
function App() {
return
}
export default App;
// Header.js
import React, { Component } from ‘react’
class Header extends Component {
render() {
const {name, age} = this.props
return (
{name}
{age}
)
}
}
export default Header
-
针对于函数组件来说，如果想要设置默认的 props 属性值，则直接通过 组件名称.defaultProps 来设置一个对象
-
针对于类组件来说，我们可以直接定义 static defaultProps 来管理需要设置默认值的属性即可
为什么要对 props 中的属性进行校验
JS 本身是弱类型语言，它里边的参数或者方法，在定义形参的时候我们没有办法直接对类型进行设置，这时候对于我们的使用来说有利有弊，比如说我这里的参数需要接受一个 number 类型的，但是传入的却是 string 类型的，那么一定会影响后续逻辑代码的实现，所以需要类型校验
import About from ‘./About’
function App() {
return
}
export default App;
// App.js
import React from ‘react’
import PropTypes from “prop-types”;
function About({name, age}) {
return (
{name}
{age}
)
}
About.defaultProps = {
name: 111,
age: 188
}
About.propTypes = {
name: PropTypes.string
}
export default About
函数式组件设置默认值
import About from ‘./About’
function App() {
return
}
export default App;
// About.js
import React from ‘react’
function About({name, age}) {
return (
{name}
{age}
)
}
About.defaultProps = {
name: ‘dgd’,
age: 188
}
export default About
类式组件设置默认值
import Header from ‘./Header’
const obj = {
name: ‘rookie’,
age: 18
function App() {
return
}
export default App;
// Header.js
import React, { Component } from ‘react’
class Header extends Component {
static defaultProps = {
name: ‘拉勾’,
age: 3
}
render() {
const {name, age} = this.props
return (
{name}
{age}
)
}
}
export default Header
类组件传递 JSX
import Header from ‘./Header’
function App() {
return
Header 中的 P 标签
}
export default App;
// Header.js
import React, { Component } from ‘react’
class Header extends Component {
render() {
return (
{this.props.children}
)
}
}
export default Header
函数组件传递 JSX
import About from ‘./About’
function App() {
return
About 中的 P 标签
}
export default App;
// About.js
import React from ‘react’
function About(props) {
return (
{props.children}
)
}
export default About
================================================================
预期结构图
- header.js
function Header() {
return (<div className={“header”}>Header组件)
}
export default Header
- home.js | list.js
// home.js
import Layout from ‘./Layout’
function Home() {
return (
当前是 Home 页面
)
}
export default Home
// list.js
import Layout from ‘./Layout’
function List() {
return (
当前是 List 页面
)
}
export default List
- footer.js
function Footer() {
return (<div className={“footer”}>Footer组件)
}
export default Footer
- layout.js
/**
-
当前组件作用就是将 header 与 footer 显示出来，同时中的 main 内容空出来
-
将来我们传入什么样的 JSX 那么就显示什么样的 DOM
*/
import Header from ‘./Header’
import Footer from ‘./Footer’
function Layout(props) {
return(<>
{props.children}
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
