一、组件的定义

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组件的定义、渲染和传值总结的更多相关文章

  1. 关于React组件之间如何优雅地传值的探讨

    闲话不多说,开篇撸代码,你可以会看到类似如下的结构: import React, { Component } from 'react'; // 父组件 class Parent extends Com ...

  2. React组件复用的方式

    React组件复用的方式 现前端的工程化越发重要,虽然使用Ctrl+C与Ctrl+V同样能够完成需求,但是一旦面临修改那就是一项庞大的任务,于是减少代码的拷贝,增加封装复用能力,实现可维护.可复用的代 ...

  3. react组件间的传值方法

    关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...

  4. 编写高性能React组件-传值篇

    很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...

  5. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

  6. React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)

    本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...

  7. React 组件间传值

    壹  .了解React传值的数据 一. 创建组件的方法 一 . 1  通过function声明的组件特点是: 1)function创建的组件是没有state属性,而state属性决定它是不是有生命周期 ...

  8. 深入了解React组件重新渲染的条件和生命周期

    React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...

  9. React 组件条件渲染的几种方式

    一.条件表达式渲染 (适用于两个组件二选一的渲染) render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> ...

随机推荐

  1. 单位rem 触屏适配总结

    总结过的:定宽320 缩放适配手机屏幕 参考文章:web app变革之rem 先了解一下rem css3 中引入了新的长度单位,rem. 官方定义 font size of the root elem ...

  2. Gitlab提交时间错误问题修复

    gitlab-ctl status gitlab提交时间显示错误,明明是近期修改提交的代码在页面显示的时间是19年前 查看配置文件 /etc/gitlab/gitlab.rb 时区设置正确,再说就算是 ...

  3. Flutter Bloc状态管理 简单上手

    我们都知道,Flutter中Widget的状态控制了UI的更新,比如最常见的StatefulWidget,通过调用setState({})方法来刷新控件.那么其他类型的控件,比如StatelessWi ...

  4. [VS] - EntityFrameworkCore 2.0 安装失败 之解决

    背景 在 Visual Studio 2017 中,使用 Nuget 包管理器安装 EntityFrameworkCore 2.0 失败.切换至程序包控制器管理台,查看 Error Message: ...

  5. ~postman基础断言方法

    postman官方文档:https://learning.getpostman.com/docs/postman/scripts/test_examples/ 断言1:检查响应主体是否包含字符串 // ...

  6. WUSTOJ 1337: Car race game(C)树状数组,离散化

    题目链接:1337: Car race game 参考资料:⑴ Car race game 树状数组 棋煜,⑵ 树状数组,⑶ 离散化 补充资料:⑴ qsort,⑵ 二分查找 Description B ...

  7. 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 ...

  8. Appium无线连接安卓终端方法 + ADB Shell常用命令(持续更新)

    ADB无线连接手机的方法1)手机与PC有线相连 - 检查是否连接正常: adb devices - 执行以下命令:adb tcpip 5555 # 当前9001       - 成功提示:restar ...

  9. 【转】使用ASP.NET Web API构建Restful API

    https://blog.csdn.net/mzl87/article/details/84947623 要点:使用DTO将内部实体与传输实体分离,利用Automapper实现两者的自动映射

  10. Centos7阿里云安装OpenProject-亲测

    10/182019年10月18日13:50 参考 <https://ywnz.com/linuxyffq/4085.html> 说在前头:网上有各种教程,包括官方自己的教程,在阿里云服务器 ...