React(一)——组件以及Props

上节我们搭建完react项目的基本内容后，接下来就是丰富页面的内容，那么我们需要写对应的页面组件。查看文档可知，组件有两种形式：函数组件和class组件

1. 函数组件

定义组件最简单的方式就是编写JavaScript函数

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

• 在pages文件夹下创建home文件夹 pages/home/Home.js

function Home(props) {
    return (
        

            首页信息-{props.name}
        
    )
}
export default Home

• App.js中引入Home组件

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/home/Home'

function App() {
  return (
    

      首页
      
		}>
      
    
  );
}

2. class组件

• 在pages文件夹下创建MyArticle文件夹 pages/MyArticle/index.js

import { Component } from 'react'
export default class MyArticle extends Component {
    render(props) {
        return (
            

                这是文章-{this.props.title}
            
        )
    }
}

• 在App.js中引入该组件并使用，通过属性给组件传参

import { Routes, Route, Link } from 'react-router-dom';
import MyArticle from './pages/MyArticle/index'

function App() {
  return (
    

      文章
      
        }>
      
    
  );
}

export default App;

3. props属性

• 像上述示例一样，当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
• 组件名称必须以大写字母开头! React 会将以小写字母开头的组件视为原生 DOM 标签。例如，
  代表 HTML 的 div 标签，而 则代表一个组件，并且需在作用域内使用 Welcome。

4. 组合组件

组件可以在其输出中引入其他的组件。这就可以让我们用同一组件抽象出任意层次的细节

• pages/MixComponet/index.js

组合组件一： 函数组件中包含class组件和函数组件

import MyArticle from "../MyArticle";
import Home from "../Home";

function MixComponent() {
    return (
        

            
            
            
            
        
    )
}

export default MixComponent


组合组件二： class组件中包含class组件和函数组件

import MyArticle from "../MyArticle";
import Home from "../Home";
import { Component } from "react";

export default class MixComponent extends Component {
    render() {
        return (
            

                
                
                
                
            
        )
    }
}

5. Props

Props和Vue中一样，用来接收父组件传给子组件的参数，是只读的。无论是函数组件还是class组件，都不能修改自身的props。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~