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

 

We have code:app

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:less

const App = () => <Demo {...{greeting, name}}  />;

ordom

const App = () => Demo({greeting, name})

 

But if we using Class Component instead of functional component like:this

class Demo extends React.Component {
  render() {
    return (
      <h2>
        {this.props.greeting}, {this.props.name}
      </h2>
    )
  }
}

Then we have to use JSX approach or:spa

const App = () => React.createElement(Demo, {greeting, name});
相關文章
相關標籤/搜索