Реагировать компонент против элемента для повторного использования в том же файле

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.

ключевые точки :

1. I doне хочет создать новый файл, потому что он никогда не будет использоваться другими компонентами.
2. Он должен отображать содержимое в зависимости от name и tel переменных.
3. It не должен быть гибким, name и tel всегда будут такими же, как у Article реквизита.

Поэтому я попытался достичь своей цели с помощью:

Вариант 1: Отдельный компонент реакции (в том же файле)

// 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 : компонент реагирования в компоненте реагирования

// 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 : элемент JSX в компоненте React

// 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?), Потому что я не видел его много.

Каждый вариант работает, но я хочу знать различия между этими стилями,

1. Производительность - как каждый из них работает / как это влияет на производительность?
2. Плюсы и минусы
3. Ограничения - есть ли что беспокоиться при его использовании?
4. Популярность - какой стандартный способ написания React?