React组件的定义、渲染和传值总结
一、组件的定义
1、使用JavaScript函数定义 Welcome.js
import React from 'react'; function Welcome() {
return (
<div>我是一个组件</div>
);
} export default Welcome;
2、使用 ES6 class 定义 Welcome.js
import React from 'react'; class Welcome extends React.Component {
render() {
return (
<div>我是一个组件</div>
);
}
} export default Welcome;
二、组件的渲染
index.js 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome'; ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
三、复合组件
1、通过创建多个组件来合成一个组件
import React from 'react'; function Name(props) {
return (
<p>我是{props.name}</p>
);
} function Age(props) {
return (
<p>我{props.age}岁</p>
);
} function Sex(props) {
return (
<p>我是一个{props.sex}人</p>
);
} function Me() {
return (
<div>
<Name name="海牛大大" />
<Age age="22" />
<Sex sex="男" />
</div>
);
} export default Me;
2、渲染合成的组件
import React from 'react';
import ReactDOM from 'react-dom';
import Me from './Me'; ReactDOM.render(
<Me />,
document.getElementById('root')
);
运行结果:
四、组件之间的传值
1、父组件传给子组件
父组件通过自定义属性进行传值,这里以传 lastName 的值为例:
Parent.js
import React from 'react'
import Child from './Child' class Parent extends React.Component {
render() {
return (
<div>
<Child lastName='Liu' />
</div>
)
}
} export default Parent;
子组件通过 this.props 获取,这里接收父组件传过来 lastName 的值
Child.js
import React from 'react' class Child extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div>
<h1>My lastname is {this.props.lastName}</h1>
</div>
)
}
} export default Child;
渲染父组件:
ReactDOM.render(
<div><Parent /></div>,
document.getElementById('root')
);
运行结果:
2、子组件传给父组件
利用回调来完成,父组件传递一个函数,这里以传 fn 为例
import React from 'react'
import Child from './Child' class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
fontColor: ''
}
} render() {
return (
<div>
<h1 style={{color:this.state.fontColor}}>标题</h1>
<Child fn={(e) => this.setState({fontColor: e})} />
</div>
)
}
} export default Parent;
子组件将要传递的值作为参数,并调用父组件传递的函数,这里将 red 作为参数调用
import React from 'react' class Child extends React.Component {
constructor(props) {
super(props);
this.state = {}
} render() {
return (
<div>
<button onClick={(e) => this.props.fn('red')}>
单击改变标题颜色
</button>
</div>
)
}
} export default Child;
运行结果:
3、兄弟组件之间的传值
A子组件先传给父组件,父组件再传给B子组件
React组件的定义、渲染和传值总结的更多相关文章
- 关于React组件之间如何优雅地传值的探讨
闲话不多说,开篇撸代码,你可以会看到类似如下的结构: import React, { Component } from 'react'; // 父组件 class Parent extends Com ...
- React组件复用的方式
React组件复用的方式 现前端的工程化越发重要,虽然使用Ctrl+C与Ctrl+V同样能够完成需求,但是一旦面临修改那就是一项庞大的任务,于是减少代码的拷贝,增加封装复用能力,实现可维护.可复用的代 ...
- react组件间的传值方法
关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...
- 编写高性能React组件-传值篇
很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)
本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...
- React 组件间传值
壹 .了解React传值的数据 一. 创建组件的方法 一 . 1 通过function声明的组件特点是: 1)function创建的组件是没有state属性,而state属性决定它是不是有生命周期 ...
- 深入了解React组件重新渲染的条件和生命周期
React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...
- React 组件条件渲染的几种方式
一.条件表达式渲染 (适用于两个组件二选一的渲染) render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> ...
随机推荐
- 单位rem 触屏适配总结
总结过的:定宽320 缩放适配手机屏幕 参考文章:web app变革之rem 先了解一下rem css3 中引入了新的长度单位,rem. 官方定义 font size of the root elem ...
- Gitlab提交时间错误问题修复
gitlab-ctl status gitlab提交时间显示错误,明明是近期修改提交的代码在页面显示的时间是19年前 查看配置文件 /etc/gitlab/gitlab.rb 时区设置正确,再说就算是 ...
- Flutter Bloc状态管理 简单上手
我们都知道,Flutter中Widget的状态控制了UI的更新,比如最常见的StatefulWidget,通过调用setState({})方法来刷新控件.那么其他类型的控件,比如StatelessWi ...
- [VS] - EntityFrameworkCore 2.0 安装失败 之解决
背景 在 Visual Studio 2017 中,使用 Nuget 包管理器安装 EntityFrameworkCore 2.0 失败.切换至程序包控制器管理台,查看 Error Message: ...
- ~postman基础断言方法
postman官方文档:https://learning.getpostman.com/docs/postman/scripts/test_examples/ 断言1:检查响应主体是否包含字符串 // ...
- WUSTOJ 1337: Car race game(C)树状数组,离散化
题目链接:1337: Car race game 参考资料:⑴ Car race game 树状数组 棋煜,⑵ 树状数组,⑶ 离散化 补充资料:⑴ qsort,⑵ 二分查找 Description B ...
- WUSTOJ 1335: Similar Word(Java)
题目链接:1335: Similar Word Description It was a crummy day for Lur. He failed to pass to the CET-6 (Col ...
- Appium无线连接安卓终端方法 + ADB Shell常用命令(持续更新)
ADB无线连接手机的方法1)手机与PC有线相连 - 检查是否连接正常: adb devices - 执行以下命令:adb tcpip 5555 # 当前9001 - 成功提示:restar ...
- 【转】使用ASP.NET Web API构建Restful API
https://blog.csdn.net/mzl87/article/details/84947623 要点:使用DTO将内部实体与传输实体分离,利用Automapper实现两者的自动映射
- Centos7阿里云安装OpenProject-亲测
10/182019年10月18日13:50 参考 <https://ywnz.com/linuxyffq/4085.html> 说在前头:网上有各种教程,包括官方自己的教程,在阿里云服务器 ...