[React] Spread Component Props in JSX with React

发布时间：2020-12-15 20:25:04 所属栏目：百科来源：网络整理

导读：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

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}}  />;

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});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!