对 react(?) 或 javascript 语法的好奇心

Question

在浏览 React 文档 (https://reactjs.org/docs/integrating-with-other-libraries.html) 时，我发现了这个代码片段：

class Chosen extends React.Component {

   componentDidMount() {
      this.$el = $(this.el);
      this.$el.chosen();
    }

    componentWillUnmount() {
      this.$el.chosen('destroy');
    }

  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

我不明白的语法如下：

ref = {el => this.el = el}

声明指的是什么？我知道它与 :

相同

ref = { el => {
            return this.el = el
            }
       }

但这是什么意思？这段代码的流程是什么？

Answer 1

el => this.el = el 是 function(el) { this.el = el } (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 的排序。

ref 关键字用于获取元素参考以供将来使用，如 focus 事件。我们有两种方式使用 ref.

方式 1（使用引用字符串）

class MyComponent extends Component {
    focusInput() {
        this.refs.inputAge.focus();
    }

    render() {
        return(
            <input ref="inputAge" />
        )
    }
}

通过这种方式，所有 ref 都进入 this.refs。

方式二（使用箭头函数）

class MyComponent extends Component {
    focusInput() {
        this.inputAge.focus();
    }

    render() {
        return(
            <input ref={ref => this.inputAge = ref} />
        )
    }
}

通过这种方式，我们可以将 ref 保留在我们想要的任何地方，因为我们可以通过函数控制它。

对 react(?) 或 javascript 语法的好奇心

Curiosity on react(?) or javascript syntax

javascript

syntax

jquery

jquery-chosen

reactjs

方式 1（使用引用字符串）

方式二（使用箭头函数）