三方集成
下面这篇教程会简单介绍React如何和三方库集成.
在这个例子中我们将会学习到如何混合使用React和jQuery UI 这个插件. 我们选用了tag-it这个jQuery插件来举例. 这个插件讲无序列表(unordered list)转化成input标签来管理.
<ul>
<li>JavaScript</li>
<li>CSS</li>
</ul>
为了让上面这段代码能够运行, 我们需要引入jQuery, jQuery UI 以及tag-it这个插件. 使用插件的代码如下.
$('<dom element selector>').tagit();
我们选择了一个DOM元素然后调用了tagit方法.
首先我们要做的事情是对Tags这个组件我们需要它只被React渲染一次(single-renderer).
这是因为当React渲染出我们想控制的DOM元素之后,我们想把该元素的控制权从React转交给jQuery.
如果我们跳过了这一步,那么React和jQuery会对相同的DOM元素进行控制, 并且不会知道彼此的存在. 为了实现这个一次渲染的机制, 我们需要用到React自带的生命周期方法shouldComponentUpdate.
当我们想以编程的方式在已有的tag-itDOM对象上添加新的标签时, 这一行为将被这个React组件触发, 并且需要配合上jQuery API一起才能工作. 我们需要找到一种方法, 既能让数据和Tags组件交互,又能保证组件只渲染一次. 为了更形象的描述我们的实现过程, 我们会在我们的APP组件里面添加一个input和一个button. 当button被点击时, 我们会讲一个string传递到Tags组件中.
class App extends React.Component {
constructor(props) {
super(props);
this._addNewTag = this._addNewTag.bind(this);
this.state = {
tags: ['JavaScript', 'CSS'],
newTag: null
};
}
_addNewTag() {
this.setState({newTag: this.refs.field.value});
}
render() {
return (
<div>
<p>Add new tag:</p>
<div>
<input type='text' ref='field'/>
<button onClick={ this._addNewTag }>Add</button>
</div>
<Tags tags={ this.state.tags } newTag={ this.state.newTag }/>
</div>
);
}
}
我们使用了组件内部的state来存储我们新加入的field. 当我们每一次点击button的时候, state都会被更新从而触发Tags组件的重新渲染. 然而, 因为在shouldComponentUpdate中我们返回了false, 所以组件事实上并不会被更新. 还有另外一点不同的是我们通过另一个生命周期方法componentWillReceiveProps取到了新标签的值, 同时调用tagit方法来增加我们的filed.
class Tags extends React.Component {
componentDidMount() {
this.list = $(this.refs.list);
this.list.tagit();
}
shouldComponentUpdate() {
return false;
}
componentWillReceiveProps(newProps) {
this.list.tagit('createTag', newProps.newTag);
}
render() {
return (
<ul ref='list'>
{ this.props.tags.map((tag, i) => <li key={ i }>{ tag } </li>) }
</ul>
);
}
}