zoukankan      html  css  js  c++  java
  • [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});
  • 相关阅读:
    11.分类与监督学习,朴素贝叶斯分类算法
    14 深度学习-卷积
    13-垃圾邮件分类2
    12.朴素贝叶斯-垃圾邮件分类
    9、主成分分析
    8、特征选择
    7.逻辑回归实践
    6.逻辑归回
    5.线性回归算法
    15 手写数字识别-小数据集
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9491193.html
Copyright © 2011-2022 走看看