目录

三方集成

优质
小牛编辑
125浏览
2023-12-01

下面这篇教程会简单介绍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);
  4. this._addNewTag = this._addNewTag.bind(this);
  5. this.state = {
  6. tags: ['JavaScript', 'CSS'],
  7. newTag: null
  8. };
  9. }
  10. _addNewTag() {
  11. this.setState({newTag: this.refs.field.value});
  12. }
  13. render() {
  14. return (
  15. <div>
  16. <p>Add new tag:</p>
  17. <div>
  18. <input type='text' ref='field'/>
  19. <button onClick={ this._addNewTag }>Add</button>
  20. </div>
  21. <Tags tags={ this.state.tags } newTag={ this.state.newTag }/>
  22. </div>
  23. );
  24. }
  25. }

我们使用了组件内部的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. }
  6. shouldComponentUpdate() {
  7. return false;
  8. }
  9. componentWillReceiveProps(newProps) {
  10. this.list.tagit('createTag', newProps.newTag);
  11. }
  12. render() {
  13. return (
  14. <ul ref='list'>
  15. { this.props.tags.map((tag, i) => <li key={ i }>{ tag } </li>) }
  16. </ul>
  17. );
  18. }
  19. }

参考资料: