mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
[Docs] Tip on integration with other libraries
Chose this title because it's more eye-catchy than "third-party integration".
This commit is contained in:
@@ -34,3 +34,5 @@
|
||||
title: References to Components
|
||||
- id: children-undefined
|
||||
title: this.props.children undefined
|
||||
- id: use-react-with-other-libraries
|
||||
title: Use React with Other Libraries
|
||||
|
||||
@@ -4,6 +4,7 @@ title: this.props.children undefined
|
||||
layout: tips
|
||||
permalink: children-undefined.html
|
||||
prev: references-to-components.html
|
||||
next: use-react-with-other-libraries.html
|
||||
---
|
||||
|
||||
You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner:
|
||||
|
||||
38
tips/18-use-react-with-other-libraries.md
Normal file
38
tips/18-use-react-with-other-libraries.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: use-react-with-other-libraries
|
||||
title: Use React with Other Libraries
|
||||
layout: tips
|
||||
permalink: use-react-with-other-libraries.html
|
||||
prev: children-undefined.html
|
||||
---
|
||||
|
||||
You don't have to go full React. The component [lifecycle events](/react/docs/component-specs.html#lifecycle-methods), especially `componentDidMount` and `componentDidUpdate`, are good places to put your other libraries' logic.
|
||||
|
||||
```js
|
||||
var App = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {myModel: new myBackboneModel({items: [1, 2, 3]})};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
$(this.refs.placeholder.getDOMNode()).append($('<span />'));
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
// Clean up work here.
|
||||
},
|
||||
|
||||
shouldComponentUpdate: function() {
|
||||
// Let's just never update this component again.
|
||||
return false;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return <div ref="placeholder"/>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.
|
||||
Reference in New Issue
Block a user