Как правильно написать в ReactJs компонент для новостного блока с различным функционалом?

Question

[RomanSS]

Хотел сделать компонент для новостного блока, но возникли проблемы, которые не знаю как правильно и без хаков решить.
Изначально была задача сделать подгрузку данных из базы. С базы приходит объект

{
    title: "название статьи",
    html: "тут html код сверстанной страницы"
}

Всё это делал через вставку dangerouslySetInnerHTML. (да желательно его не использовать, но это был самый быстрый вариант)

Теперь с расширением функционала, мне нужно использовать различные готовые модули, которые легко подгружаются через import в этом компоненте, но из-за того что я вставляю код через dangerouslySetInnerHTML обращаться к этим функциям невозможно. Как мне изменить компонент и вставку html, чтобы я мог использовать функции в контексте этого компонента?
Выносить в глобальную область видимости не хочется.

Comments

[Alex Karo]

Я так понимаю, компоненты реакта должны вставлятся в контент статьи?

[RomanSS]

Александр, этого конечно было бы достаточно, а так нужен доступ к this компонента.

[Alex Karo]

А какая изначально задача - зачем выполнять js код из html контента?

[RomanSS]

Александр, в подгружаемом html есть кнопки на которые нужно навесить различный функционал. Из-за того что html код может часто меняться делать его как компонент не вариант, придется постоянно поправлять компонент.
p.s. Для себя эту проблему уже решил, после вставки html кода, заменяю onlick с нужным контекстом. Но хотелось бы увидеть еще другие решения.

[Alex Karo]

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

[RomanSS]

Александр, ну я так примерно и решил то есть там, где мне нужно в html вешаю onclick="return ['nameFunction', arg]"
Потом как html загрузился заменяю их уже с нужным контекстом. Примерно так

document.querySelectorAll("[onclick]").forEach((el) => {
   let btnFunc = el.onclick;
   el.onclick = (e) => {
      let arg=btnFunc();
      if(arg[0] in this.contentFn) {
              this.contentFn[arg[0]].apply(this.contentFn, arg.slice(1));
      }
  }
});

this.contentFn - здесь хранятся все доступные функции для выполнения, this это сам компонент
Как думаете, есть ли в этом подходе серьезные проблемы?

Answer 1

[grinat]

eval