Как получить доступ к элементу React, который был визуализирован с помощью renderToString и добавлен с помощью dangerouslySetInnerHTML - PullRequest
Новая
       10

Как получить доступ к элементу React, который был визуализирован с помощью renderToString и добавлен с помощью dangerouslySetInnerHTML

1 голос
/ 01 октября 2019

РЕДАКТИРОВАНИЕ: я исправил способ ввода кода, он не связан с MDX, это просто обычный html

У меня есть html код, который я вставляю на свою страницу React с 

dangerouslySetInnerHTML={{ __html: myContent }}

Ранее я добавил некоторые компоненты к myContent простым regex.replace(), где я заменил простой текст компонентом React, преобразованным в обычный html, с 

ReactDOMServer.renderToString(<Input type="text" ref={inputRef}/>)

*<Input> - это стилизованный компонент, который возвращает элемент <input>

Однако я не могу получить доступ к inputRef, а также к любым onClick или onChange работам

IВы думаете, что для включения этих слушателей событий я должен hydrate компонент? Не знаю точно, как это можно применить здесь, и не знаю, предполагается ли применять hydrate в этом случае пользователя (сервер не задействован)

Так что цель в том, что я могу взаимодействовать, когдаэто <input> изменено, но до сих пор это абсолютно статичный html, к которому я не могу получить доступ к

Что я могу сделать?

В конце я добавил <input id="blah"... и доступ к нему с ванильным JavaScript без каких-либо видимых проблем

...