Как сделать `React Component` не для DOM

Question

Допустим, я хочу визуализировать компонент React на лету и получил реальный элемент DOM для будущего использования

например, если у меня есть этот компонент:

 function Card({symbol,id,color}){
  return <my-card symbol={} id={} color={color}></my-card>
 }

как мне отрендерить и получить элемент?

может быть так

 const cardElement = React.render(<Card symbol='4' id=111 color='♥'/>)

Мне нужен реальный элемент для игры с ним. сделать некоторые измерения. а затем удалите его.

Но я думаю, что от фреймворка обычно есть какой-то способ позволить разработчику содержать настоящий элемент DOM, если он ему нужен; Я имею в виду, хорошие рамки должны иметь способ сделать это

Answer 1

render возвращает экземпляр компонента, а не DOM.Как указано в ReactDOM.render документации ,

Визуализируйте элемент React в DOM в поставляемом контейнере и верните ссылку на компонент (или вернете значение NULL для компонентов без состояния).

Если элемент React ранее отображался в контейнере, он будет обновлять его и изменять только DOM по мере необходимости, чтобы отразить последний элемент React.

Если предоставляется дополнительный обратный вызов, онбудет выполнен после того, как компонент будет отрендерен или обновлен.

DOM визуализируется для предоставленного элемента контейнера:

const element = document.createElement('div');
ReactDOM.render(<Card ... />, element);
console.log(element.outerHTML);

Если компонент асинхронный, для извлечения должен использоваться обратный вызовасинхронное обновление DOM.

Answer 2

Почему бы не использовать что-то вроде этого:

const preRender = () => <Card symbol='4' id=111 color='♥'/>

Теперь у вас есть содержимое Card компонента без состояний, отображаемого в preRender переменная