How on React.js to make a component, the contents of the dom-element of which must be fully controlled by the script?

The following code creates the Smth component, which is a div with the passed text as the content. It is guaranteed that the text property will have a string.

 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>

How to do that:

  1. The reaction was correctly built and updated by the div itself.
  2. The written script was completely responsible for the contents of this div and could put both text and markup inside it, as well as change it independently of the component.
  3. A written script found out that the text property has changed.
    I believe that this item should be carried out by itself.

A written script is understood as a certain script inside a component that is not controlled by a reactor. There is a need to change the contents of the dom element, regardless of the reactor.

PS: The same question in English.

  • I do not understand anything. All that you have described is made a reactor out of the box. It is necessary to update an element if a certain value arrives, use shouldComponentUpdate . Everything has its own methods of the component life cycle, and you should ask to update this or that thing or not. If it is necessary, for example, to return methods from the reactor to the top, I returned to componentWillMount methods created inside the component to control it, for example, setting any values. And outside he called these methods - Vasily Barbashev
  • association: stackoverflow.com/q/33632643/4928642 - Qwertiy ♦

2 answers 2

The documentation describes the work with third-party libraries.

But does it make sense to rewrite the “third-party script” as a component of React that implements this <div/> ?

  • There the processing of the reactor is completely disabled: shouldComponentUpdate: function() { return false; } shouldComponentUpdate: function() { return false; } , and I want to exclude it only for viscera. Although, in extreme cases, go. - Qwertiy ♦
  • By all indications, you are required from this div to behave just the next (nested) React component. Is the script logic exactly incompatible with React? - Sergiks
  • Script logic contains document.createRange for measuring text sizes. And the script itself is the implementation of a multi-line ellipse - each line turns into a span. It is possible to calculate everything without changing the contents, and then nakhimichit something, so that the reactor itself has built the desired structure, but it does not make sense - an unnecessary and absolutely useless work is dumped onto the reactor. - Qwertiy ♦

Most likely you need to transfer content for <div /> via React.DOM.div({dangerouslySetInnerHTML:{__html: '<span>your markup</span>'}}) .

Documentation