代码之家 › 专栏 › 技术社区 › Jay Jeong

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

jquery-chosen syntax reactjs jquery javascript

Jay Jeong · 技术社区 · 8 年前

同时浏览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
            }
       }

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

1 回复 | 直到 8 年前

Kishan Mundha 8 年前

el => this.el = el 很抱歉 function(el) { this.el = el } ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions )

ref 关键字,用于获取元素引用以供将来使用,如 focus 事件。我们有两种方法 裁判 .

方式1(使用ref字符串)

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

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

这样,所有的裁判 this.refs .

方式2(使用箭头功能)

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

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

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

推荐文章

suisqa · 我是新来的

4 年前

Robert Munroe · “If X!=A、B或C”的Python语法[重复]

4 年前

tomm · 谷歌表格-将两列相乘,复制第三列

4 年前

ziemsterr · 无法在SQL SELECT语句中找出此语法错误

4 年前

clarkk · 当声明向量时,(1)是什么意思?

4 年前

NMOLL · python_数据['division']中的语法无效。追加(int(拆分[3]))

4 年前

Mike C. · Bash错误[:检查文件是否存在时缺少“]”

4 年前

Aleix · 错误代码:1064。您的SQL语法有错误;在2号线的“”附近

4 年前

michael · 错误的脚本和语法问题

4 年前