• 三方集成
    • 参考资料:

    三方集成

    下面这篇教程会简单介绍React如何和三方库集成.

    在这个例子中我们将会学习到如何混合使用React和jQuery UI 这个插件.
    我们选用了tag-it这个jQuery插件来举例. 这个插件将无序列表(unordered list)转化成input标签来管理.

    1. <ul>
    2.   <li>JavaScript</li>
    3.   <li>CSS</li>
    4. </ul>

    为了让上面这段代码能够运行, 我们需要引入jQuery, jQuery UI 以及tag-it这个插件. 使用插件的代码如下.

    1. $('<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组件中.

    1. class App extends React.Component {
    2.   constructor(props) {
    3.     super(props);
    5.     this._addNewTag = this._addNewTag.bind(this);
    6.     this.state = {
    7.       tags: ['JavaScript', 'CSS'],
    8.       newTag: null
    9.     };
    10.   }
    12.   _addNewTag() {
    13.     this.setState({newTag: this.refs.field.value});
    14.   }
    16.   render() {
    17.     return (
    18.       <div>
    19.         <p>Add new tag:</p>
    20.         <div>
    21.           <input type='text' ref='field'/>
    22.           <button onClick={ this._addNewTag }>Add</button>
    23.         </div>
    24.         <Tags tags={ this.state.tags } newTag={ this.state.newTag }/>
    25.       </div>
    26.     );
    27.   }
    28. }

    我们使用了组件内部的state来存储我们新加入的field. 当我们每一次点击button的时候, state都会被更新从而触发Tags组件的重新渲染.
    然而, 因为在shouldComponentUpdate中我们返回了false, 所以组件事实上并不会被更新.
    还有另外一点不同的是我们通过另一个生命周期方法componentWillReceiveProps取到了新标签的值, 同时调用tagit方法来增加我们的filed.

    1. class Tags extends React.Component {
    2.   componentDidMount() {
    3.     this.list = $(this.refs.list);
    4.     this.list.tagit();
    5.   }
    7.   shouldComponentUpdate() {
    8.     return false;
    9.   }
    11.   componentWillReceiveProps(newProps) {
    12.     this.list.tagit('createTag', newProps.newTag);
    13.   }
    15.   render() {
    16.     return (
    17.       <ul ref='list'>
    18.         { this.props.tags.map((tag, i) => <li key={ i }>{ tag } </li>) }
    19.       </ul>
    20.     );
    21.   }
    22. }

    参考资料:

    • https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party