рендеринг элемента Dynami c html на основе реквизита в реакции

Question

У меня есть компонент, который получает кучу значений в качестве реквизита, среди них есть реквизит со строковым значением, определяющим тип 'output html to return'.

что-то вроде этого, которое конечно неправильно

const WithScrollingText = ({text,boxWidth,tag}) => {
    return boxWidth > 100
    ?   <tag>{text}</tag>
    :   <div className="with-scrolling-text"><div>{text}</div></div>
}

и я бы назвал / использовал этот компонент так:

<WithScrollingText text="Something" boxWidth={250} tag="span"/>
<WithScrollingText text="Something else" boxWidth={250} tag="div"/>

и т. д.

Как я могу исправить рендеринг так, чтобы при Я посылаю 'span' компоненту, он рендерит и возвращает span

Answer 1

JSX - это просто синтактический c сахар. Бабель превращает <div>Hello</div> в React.createElement("div", {}, "Hello").

Таким образом, чтобы иметь динамическое имя тега c, вы можете использовать этот синтаксис напрямую:

const WithScrollingText = ({text, boxWidth, tag}) => {
    return boxWidth > 100
    ? React.createElement(tag, {}, text)
    : <div className="with-scrolling-text"><div>{text}</div></div>
}

Другой подход, если вы хотите придерживаться тега в стиле JSX, просто присвоить значение tag переменной с заглавной первой буквой - это говорит React оценивать ее как переменную, а не обрабатывать ее как строку (как это было бы для элементов React, например div).

const WithScrollingText = ({text, boxWidth, tag}) => {
  const Tag = tag
  return boxWidth > 100
    ? <Tag>{text}</Tag>
    : <div className="with-scrolling-text"><div>{text}</div></div>
}