Обновления DOM дерева в react jsв не компонента

Вопрос-ответ JavaScript
1

Всем привет, на данный момент есть два функционала на странице, один написан на react другой на jquery. Так вот на jquery есть кнопка изменяющая пользователя и хотелось бы что бы при изменении пользователя сразу же react обновлялся. Проблема в том, что если я делаю обновления своего компонента в самом реакте так:

const app = document.getElementById("tableSubordinateView");
const element = <CreateTableView />;
const ref = ReactDOM.render(element, app);
ref.forceUpdate();

то все работает, но если так:
$(function () {

$('#saveChange').click(function(){
    renderDom();
    // $.ajax({
    //     dataType : 'json',
    //     type     : 'post',
    //     url      : '/Admin/changeUser',
    //     data     : {
    //         
    //     },
    //     success : function (data) {

    //     }
    // });
});

});

var renderDom = function() {
const app = document.getElementById(“tableSubordinateView”);
const element = ;
const ref = ReactDOM.render(element, app);
ref.forceUpdate();
}
, то выдает что не видит компонент CreateTableView

react и код jquery у меня находятся в разных файлах
<script src='{header_file file="/emc/js/function.js"}' type="text/babel"></script>
<script src='{header_file file="/emc/js/viewGroupHead.js"}' type="text/babel"></script>

подскажите что не правильно делаю? и вообще можно ли из вне рендерить по новой компонент и правильно ли это?

2

Вероятно он у тебя не может найти твой <CreateTableView /> в текущей области видимости. Попробуй пробросить его туда (импортом/экспортом если есть загрузчик модулей или глобальным экспортом через window).

1 лайк
3

ха и правда, я даже не попробовал.перенести весь код в один файл. Все заработало. Но все равно вопрос открытый, в чем был смысл этого рендера в другом файле. Редактирование используется на трех страницах, и там разный реакт код, дабы не плодить кнопку редактирования везде, хотел ее вынести и пользоваться во всех страницах, а в данном случае мне придется один и тот же код переносить в каждую страницу.

4

Не зная контекста проекта, трудно сказать почему у вас так сделано. Если знаешь как сделать лучше – предложи и обсудите (или если ты работаешь один).

Если ты все склеил в один файл, то тогда придется копировать. Или дай возможность твоей кнопке получать доступ к разным компонентам реакта (через глобальный экспорт, например). Тогда будет уютней.