1

Как на React.js сделать компонент, содержимое dom-элемента которого должно полностью контролироваться скриптом?

Следующий код создаёт компонент Smth, представляющий из себя div с переданным тексом в качестве содержимого. Гарантируется, что в свойстве text будет строка.

var Smth = React.createClass({
  render: function() {
    return React.DOM.div(this.props, this.props.text);
  }
});

ReactDOM.render(
  React.createElement(Smth, { 
    className: 'some-class',
    style: { color: 'blue' },
    text: "Some text goes here" // Nothing except text is here
  }),
  document.querySelector('main')
);
.some-class {
  border: 1px solid green;
  background: silver;
  float: left;
  padding: .25em .5em;
}
<script src="https://fb.me/react-0.14.2.min.js"></script>
<script src="https://fb.me/react-dom-0.14.2.min.js"></script>

<main></main>

Как сделать чтобы:

  1. Реакт корректно строил и обновлял сам div.
  2. Написанный скрипт полностью отвечал за содержимое этого div'а и мог помещать внутрь него как текст, так и разметку, а также изменять её независимо от компонента.
  3. Написанный скрипт узнавал о том, что свойство text изменилось.
    Полагаю, что этот пункт должен выполняться сам собой.

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

PS: Этот же вопрос на английском.

2
  • Ничего не понимаю. Все что вы описали, делается реактом из коробки. Надо обновлять элемент если приходит определенное значение, используйте shouldComponentUpdate. На все есть свои методы жизненного цикла компонента, а обновлять ту или иную вещь или нет, должны задавать Вы. Если надо например вернуть из реакта методы наверх, я на componentWillMount возвращал методы созданные внутри компонента, для управления им, например установка каких либо значений. И снаружи вызывал эти методы 27 окт 2016 в 5:12
  • ассоциация: stackoverflow.com/q/33632643/4928642
    – Qwertiy
    24 фев 2017 в 13:21

2 ответа 2

1

В документации описывают работу со сторонними библиотеками.

Но нет ли смысла «сторонний скрипт» переписать как компонент React'а, реализующий этот <div/>?

3
  • Там полностью отключается обработака реакта: shouldComponentUpdate: function() { return false; }, а я хочу исключить её только для внутренностей. Хотя, на крайний случай поидёт.
    – Qwertiy
    10 ноя 2015 в 16:53
  • По всем признакам вам от этого div'а требуется поведение просто очередного (вложенного) React-компонента. Точно ли логика скрипта несовместима с React'ом?
    – Sergiks
    10 ноя 2015 в 17:15
  • Логика скрипта содержит document.createRange для измерения размеров текста. А сам скрипт - это реализация многострочного эллипсиса - каждая строка оборачивается в span. Можно не меняя содержимое всё просчитать, а потом что-то нахимичить, чтобы реакт сам простроил желаемую структуру, но это не имеет смысла - на реакт сваливается лишняя и абсолютно бесполезная работа.
    – Qwertiy
    10 ноя 2015 в 17:26
0

Скорее всего вам нужно передавать содержимое для <div /> через React.DOM.div({dangerouslySetInnerHTML:{__html: '<span>your markup</span>'}}).

Документация

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.