前端基础-React
React学习笔记
我有一个梦!
努力拼搏,坚持不解!
展开
-
React组件的样式
行内样式 App.js import React, { Component } from "react"; export default class ClassCom extends Component { render() { return ( <div> <p style={{ color: "red", fontSize: "30px" }}> 我是类组件-行内样式 </p> </div> ); } }原创 2020-07-24 19:35:52 · 275 阅读 · 0 评论 -
React的hooks
Hook是React 16.8 的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。 hooks-useState 返回一个 state,以及更新state的函数。 App.js import React, { useState } from "react"; export default function App() { // 定义count和count的默认值和修改count的方法 const [count, setCount] = useState(15);原创 2020-07-24 19:19:25 · 153 阅读 · 0 评论 -
React跨组件通信
在React中,可以通过父子通信或者context来实现跨组件通信。 父子通信实现跨组件通信 实现原理:App组件先将数据传递给Father,然后Father组件将接收到的数据传递给Son组件。 App.js import React, { Component } from "react"; // 定义组件App export default class App extends Component { constructor(props) { super(); this.state = {原创 2020-07-24 18:56:21 · 357 阅读 · 0 评论 -
React组件的子父通信
在React中的子父通信实现方式是,父组件将自己的某个方法传递给子组件,在方法里可以做任意操作,比如可以更改状态,子组件通过this.props接收到父组件的方法后调用。 App.js import React, { Component } from "react"; export default class App extends Component { constructor(props) { super(props); this.state = { count: 0, }; }原创 2020-07-24 18:34:39 · 141 阅读 · 0 评论 -
React中组件的父子通信
父子通信,顾名思义就是父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变。在这里,将举例类组件和函数式组件的父子通信。 类组件的父子通信 App.js import React, { Component } from "react"; // 父组件App export default class App extends Component { render() { return ( <div> <Child原创 2020-07-24 17:21:47 · 224 阅读 · 0 评论 -
React组件的组合
React组件的组合是指:将一个组件写在另一个组件的内容中,然后在外层组件中通过 this.props.children来接收内容中的组件, 效果上类似vue中的插槽。 App.js import React, { Component } from "react"; import NavBar from "./NavBar"; export default class App extends Component { render() { return ( <div> <原创 2020-07-24 17:12:03 · 467 阅读 · 0 评论 -
React组件的嵌套
在React中,组件中还可以嵌套组件,此时组件的关系可称为父子组件。接下来,我将在App组件中嵌套Header、Main和Footer三个组件。 Header.js import React from "react"; // Header组件的定义 export default function Header() { return <div>我是Header组件</div>; } Main.js import React from "react"; // Main组件的定义原创 2020-07-24 16:56:20 · 837 阅读 · 0 评论 -
React组件的定义方式
在React中,有两种定义组件的方式,我们称为函数组件和类组件。 类组件 类组件的定义如下: App.js import React, { Component } from "react"; // 类组件的定义 export default class App extends Component { constructor(props) { super(props); } render() { return <div>我是类组件</div>; } } 函数组件原创 2020-07-24 16:42:59 · 280 阅读 · 0 评论