[React] Spread Component Props in JSX with React
You often find duplication between the name of a prop and a variable you will assign to the prop. JSX allows you to spread an object containing your named props into your Component which enables you to avoid the repetition of matching prop names and variable names. This lessons covers spreading JSX component props in both pure components and class components.
We have code:
import React from "react";
import { render } from "react-dom"; const Demo = ({ greeting, name }) => (
<h2>
{greeting}, {name}
</h2>
); const greeting = "hello";
const name = "John"; const App = () => <Demo greeting={greeting} name={name} />; render(<App />, document.getElementById("root"));
We can simply the code:
const App = () => <Demo {...{greeting, name}} />;
or
const App = () => Demo({greeting, name})
But if we using Class Component instead of functional component like:
class Demo extends React.Component {
render() {
return (
<h2>
{this.props.greeting}, {this.props.name}
</h2>
)
}
}
Then we have to use JSX approach or:
const App = () => React.createElement(Demo, {greeting, name});
[React] Spread Component Props in JSX with React的更多相关文章
- A Bite Of React(2) Component, Props and State
component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...
- AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX
AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...
- React——嵌入已有项目 && jsx
Add React to a Website React has been designed from the start for gradual adoption, and you can use ...
- 没有用到React,为什么我需要import引入React?
没有用到React,为什么我需要import引入React? 本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以 ...
- React系列之--props属性
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...
- 普通页面引入React(使用和不使用JSX)
1. 不使用JSX 优点: 不用配置有关JSX的编译. 依赖语法: React.createElement(component/type, props, ...chilidren); //第一个参数可 ...
- React Native 开发之 (06) JSX
一 React 1 React定义 React的GitHub地址是 https://github.com/facebook/react.它的官方介绍是 A JavaScript Library for ...
- React使用笔记1-React的JSX和Style
React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...
- React.js学习之理解JSX和组件
在开启JSX的学习旅程前,我们先了解一下React的基本原理.React本质上是一个"状态机",它只关心两件事:更新DOM和响应事件,React不处理Ajax.路由和数据存储,也不 ...
随机推荐
- php的一个魔法常亮__DIR__
我们知道PHP中提供了一个魔术常量(magic constant)__FILE__,用来指向当前执行的PHP脚本.但PHP没有直接提供该脚本所在目录的常量.也就是说如果我们要得到当前PHP脚本所在的目 ...
- autofs - automounter maps的格式
描述(DESCRIPTION) automounter maps 是一系列非主映射文件或者是NIS映射(NIS maps),它们被 automounter 的主映射文件(master map)具体调用 ...
- PHP 中 include() 与 require() 的区别说明
引用文件的方法有两种:require 及 include.两种方式提供不同的使用弹性. require 的使用方法如 require("MyRequireFile.php"); . ...
- faster rcnn一些博客
这个是对faster 问题的一个总结 http://blog.csdn.net/u010402786/article/details/72675831?locationNum=11&fps=1 ...
- vue项目打包步骤及运行打包项目
(1)项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下 ...
- Redux的中间件Middleware不难,我信了^_^
Redux的action和reducer已经足够复杂了,现在还需要理解Redux的中间件.为什么Redux的存在有何意义?为什么Redux的中间件有这么多层的函数返回?Redux的中间件究竟是如何工作 ...
- vue全选与反选以及通过使用如何filter删除数据
在vue学习经常遇到的一些基本问题,下面是购物车里面的部分功能,分享给初学者,直接上源码: <!DOCTYPE html><html> <head> <met ...
- 使用maven的mybatis-generator代码生成器插件生成实体类、mapper配置文件和mapper接口(使用idea)
接着之前创建的ssmMaven项目 一: 在pom文件中加入mybatis-generator插件 <plugins> <plugin> <groupId>org. ...
- python3 监控代码变化 自动重启 提高开发效率
#!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'Michael Liao' import os, sys, time, sub ...
- list & dictionary
list不能直接进行对应,dictionary可以 list用[],dictionary用{}