Javascript 有人能解释一下这段代码的来龙去脉吗？

我有一个热反应组件，它返回输入标签。你能解释一下第八行发生了什么吗

ref={element=>element&&（element.onChange=onChange）}

？我

import React from 'react';

export default function MyInput({
    onChange,
    ...rest
}) {
    return (
        <input
            {...rest}
            ref={element => element && (element.onChange = onChange)}
        />
    );
}

从“React”导入React；
导出默认函数MyInput({
一旦改变，
休息
}) {
返回(
元素&（element.onChange=onChange）}
/>
);
}

React的

ref

用于直接访问DOM，通常建议尽量少使用。函数引用的要点是将元素分配到类组件的变量中，请记住它们是不推荐使用的。e、 g:

Class MyComponent extends Component {
  constructor(props) {
    super(props);  
    this.inputRef = null;
  }

  ...stuff

  render() {
    ...stuff
    <input ref={element => this.inputRef = element} />
  }
}

在你的情况下，没有必要这样做。如果要分配从道具获得的onChange，只需执行以下操作：

<input {...stuff} onChange={onChange} />

---

React的

ref

用于直接访问DOM，通常建议尽量少使用。函数引用的要点是将元素分配到类组件的变量中，请记住它们是不推荐使用的。e、 g:

Class MyComponent extends Component {
  constructor(props) {
    super(props);  
    this.inputRef = null;
  }

  ...stuff

  render() {
    ...stuff
    <input ref={element => this.inputRef = element} />
  }
}

在你的情况下，没有必要这样做。如果要分配从道具获得的onChange，只需执行以下操作：

<input {...stuff} onChange={onChange} />

---

引用用于访问DOM元素

ref的值因节点类型而异：

在HTML元素上使用ref属性时，将创建ref 在构造函数中，React.createRef（）接收基础 DOM元素作为其当前属性

在自定义类组件上使用ref属性时，ref 对象接收组件的已装入实例作为其 现在

---

它们用于我们希望更改子组件的值的情况，而不使用道具和所有工具。但在您的情况下，我认为您不需要使用ref，因为您只需要分配从props收到的一次更改。

ref用于访问DOM元素

ref的值因节点类型而异：

在HTML元素上使用ref属性时，将创建ref 在构造函数中，React.createRef（）接收基础 DOM元素作为其当前属性

在自定义类组件上使用ref属性时，ref 对象接收组件的已装入实例作为其 现在

---

它们用于我们希望更改子组件的值的情况，而不使用道具和所有工具。但在您的情况下，我认为您不需要使用ref，因为您只想分配从props收到的onChange。

元素&&

是一种常见模式，用于在访问其属性之前确保元素存在。当

元素

为

未定义

时，如果试图访问

元素.onChange

，程序将崩溃，错误为

无法访问未定义

的属性“onChange”。我在我的回答中添加了一个解释。但是为什么我们需要检查它的存在呢？我们返回这个元素，它怎么可能不存在？我是否正确地理解了，我们只是在事件侦听器onChange中返回值？@IWCommer在这种特殊情况下，确实是多余的。您可以随意删除它，并且通常按照我在回答中的建议设置onChange。

元素&&

是一种常见的模式，旨在确保元素在访问其属性之前存在。当

元素

为

未定义

时，如果试图访问

元素.onChange

，程序将崩溃，错误为

无法访问未定义

的属性“onChange”。我在我的回答中添加了一个解释。但是为什么我们需要检查它的存在呢？我们返回这个元素，它怎么可能不存在？我是否正确地理解了，我们只是在事件侦听器onChange中返回值？@IWCommer在这种特殊情况下，确实是多余的。您可以随意删除它，并按照我在回答中的建议设置onChange。