Интерполировать компонент в строку

Есть ли способ отреагировать на интерполяцию компонента в строку объекта?

Я, например, пробовал что-то подобное.

const stringWithHOC = `Some string wording ${<Foobar>Lorem Ipsum</Foobar>} some more string wording`

Предположим, что <Foobar> - это стилизованные компоненты <a>, например

const Foobar = styled.a`
//some styling
`

Я ожидал увидеть строку, отрисованную с помощью Lorem Ipsum, завернутую в <a>

Что на самом деле отображается в таком компоненте:

<SomeComponent>{stringWithHOC}</SomeComponent>

Это:
Некоторые строковые формулировки {object Object} еще строковые формулировки


reactjs styled-components
person Neil Morgan    schedule 23.09.2020    source источник
comment
Я не уверен, почему вы этого ожидали - подумайте, что такое компонент и как он отображается (с помощью функции render). Строковая интерполяция не проходит через жизненный цикл компонента React.   -  person Dave Newton    schedule 24.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать renderToStaticMarkup из react-dom/server

import ReactDOMServer from 'react-dom/server';

const reactToString = (reactElement) => ReactDOMServer.renderToStaticMarkup(reactElement);
const Foobar = styled.a`
//some styling
`

const stringWithHOC = `Some string wording ${reactToString(<Foobar>Lorem Ipsum</Foobar>)} some more string wording`

// now you can use
<SomeComponent>{stringWithHOC}</SomeComponent>
person Gabriele Petrioli    schedule 23.09.2020