Question

我是React的新手，我想知道我们是否必须使用这样的硬编码数据：

import React from "react";
    import "../src/App.css";

    const header = props => {
      return (
        <header>
          <h1>Content Manager</h1>
        </header>
      );
    };

    export default header;

    import React, { Component } from "react";
    import Header from "../src/header";

    class App extends Component {
      render() {
        return (
          <div>
            <Header />
          </div>
        );
      }
    }

    export default App;

您可以看到上面的代码，就像在HTML中一样，我只是将“ Content Manager”作为常规内容放在h1中。还是我需要使用道具而不是硬编码：

import React from "react";
import "../src/App.css";

const header = props => {
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
};

export default header;


import React, { Component } from "react";
import Header from "../src/header";

class App extends Component {
  render() {
    return (
      <div>
        <Header title={"Content Manager"} />
      </div>
    );
  }
}

export default App;

如果不清楚，请告诉我

Answer 1

基本上，如果要重用组件，则应使用道具。

示例：

当您需要在3个地方使用相同的标头组件分别说“ Welcome”，“ Hello”和“ Hi”并进行了硬编码时，您将编写3个标头组件，标题分别为“ Welcome”，“ Hello”和“ Hi” “。

类似这样：

    const HiHeader = props => {
      return (
        <header>
          <h1>Hi</h1>
        </header>
      );
    };

    export default HiHeader;
    
       const HelloHeader = props => {
      return (
        <header>
          <h1>Hello</h1>
        </header>
      );
    };

    export default HelloHeader;
    
       const WelcomeHeader = props => {
      return (
        <header>
          <h1>Welcome</h1>
        </header>
      );
    };

    export default WelcomeHeader;


and you use them as

<HiHeader/>
<HelloHeader/>
<WelcomeHeader/>

以防万一，如果您使用道具，则可以编写一个标头并传递不同的道具。

示例：

const header = props => {
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
};

export default header;


import Header  from './header.js'

<Header title="Hi"/>
<Header title="Hello"/>
<Header title="Welcome"/>

Answer 2

如果您的标头组件将被重复使用以显示不同的标头，则将文本作为道具传递。否则，如果您确定只能使用一次，则可以使用硬编码。

干杯

Answer 3

从不进行硬编码，这是邪恶的！

我应该在React中对数据进行硬编码或使用props吗？

3 个答案: