[React] Spread Component Props in JSX with React
React in with Component Props jsx spread
2023-09-14 09:00:50 时间
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 Hooks源码浅析
- 如何用 esbuild 替换 Create React App 中的 Webpack
- React报错之Style prop value must be an object
- 前端常见react面试题合集
- 从React源码来学hooks是不是更香呢
- 从源码角度看React-Hydrate原理
- 【Techo Day 腾讯技术开放日】jira React 实战
- vue 父组件调用子组件_react父组件向子组件传值
- react源码解析20.总结&第一章的面试题解答
- React 消息订阅与发布机制
- 详解React的Transition工作原理原理_2023-03-15
- MySQL删除IN操作: 简易指南(mysql删除in)
- 条件不将Oracle中的空值纳入IN条件中(oracle空值in)
- MySQL中IN运算符的使用技巧(mysql中 与in)
- MySQL使用IN查询时数量超限问题的解决方法(mysql中in超过数量)
- 深入分析MySQL中IN语句的性能问题(mysql中in性能分析)
- MySQL中的IN子句如何利用索引实现高效查询(mysql中in使用索引)
- 深入探究Mysql中IN与AND逻辑运算的应用(mysql中in与and)
- MySQL中为什么不能使用IN子查询(mysql不能in子查询)
- Oracle中IN运算符的强大用法(oracle中in的使用)
- 查询Oracle中使用IN关键字查询多个值的方法(oracle中in多个值)