Question

在同一文件中，我有一个要转换为可重用的元素（或元素组）。但是因为它很小，所以我不想创建一个新文件。

例如。

// Article.js

const Article = props => {
  const { name, tel } = props

  return (
    <div>
      <section>
        <p>Content A</p>
        <small>Contact {name} now, via {tel}</small>
      </section>
      <small>Contact {name} now, via {tel}</small>
      <div>
        Having questions?
        <small>Contact {name} now, via {tel}</small>
      </div>
    </div>
  )
}

正如您在此处看到的，<small>Contact {name} now, via {tel}</small>组件中已多次使用Article。因此，我想将其转换为可重用的组件或JSX元素。

关键点是：

我不想创建新文件，因为它永远不会被其他组件使用。
它需要显示取决于name和tel变量的内容。
不需要是灵活的，name和tel始终与Article道具中的内容相同。

所以我尝试通过以下方式实现目标：

选项1：分离的React组件（在同一文件中）

// Article.js

const Contact = props => {
  const { name, tel } = props
  return <small>Contact {name} now, via {tel}</small>
}

const Article = props => {
  const { name, tel } = props

  return (
    <div>
      <section>
        <p>Content A</p>
        <Contact name={name} tel={tel}/>
      </section>
      <Contact name={name} tel={tel}/>
      <div>
        Having questions?
        <Contact name={name} tel={tel}/>
      </div>
    </div>
  )
}

但是从我的关键点3 来看，我发现此选项是多余的，因为我无需让Contact接受props。由于此组件将始终显示与name中相同的tel和Article。所以我想出了方案2。

选项2 ：React Component中的React Component

// Article.js

const Article = props => {
  const { name, tel } = props

  const Contact = () => (
    <small>Contact {name} now, via {tel}</small>
  )

  return (
    <div>
      <section>
        <p>Content A</p>
        <Contact />
      </section>
      <Contact />
      <div>
        Having questions?
        <Contact />
      </div>
    </div>
  )
}

Contact组件较短，因为它不接受props。但是问题是，如果它不接受道具，我是否应该将其编写为JSX元素？所以我想出了方案3。

选项3 ：React Component中的JSX元素

// Article.js

const Article = props => {
  const { name, tel } = props

  const renderContact = <small>Contact {name} now, via {tel}</small>

  return (
    <div>
      <section>
        <p>Content A</p>
        {renderContact}
      </section>
      {renderContact}
      <div>
        Having questions?
        {renderContact}
      </div>
    </div>
  )
}

我不知道如何正确命名它（renderContact，contactElement或contact？），因为我看的不多。

每个选项都有效，但是我想知道这些样式之间的区别，

性能-每个性能如何/对性能有何影响？
利弊
限制-使用时有什么需要担心的吗？
受欢迎程度-React的标准编写方式是什么？

React Component vs Element在同一文件中可重用性

0 个答案: