标签: ref

我正在进行代码审查，发现另一位开发人员编写的代码，例如：

function sampleComponent() {
       let divRef = {};
    
       return (
        <div ref={(el) => { divRef = el }}></div>
       )
    }

然后使用 divRef 作为 DOM 元素的引用。

然而，我知道的模式是createRef在类组件中使用，useRef在功能组件中使用钩子。甚至 ReactJS 官方https://reactjs.org/docs/refs-and-the-dom.html也表示要避免未来 React 版本的内联引用。这是一个要写的遗留模式吗？

到目前为止我能研究的是，内联会ref渲染函数两次，因此建议避免。

我想知道对此还有什么其他解释？

我对 Typescript 还是有点陌生​​，我的目标是React.useRef在 Typescript 中创建一个返回引用的自定义钩子。我希望为任何 HTML 元素键入此引用，而不仅仅是按钮。我遇到了正确输入此自定义挂钩的问题。

这是我的钩子：

type CustomRefHook = (dependencies?: string | boolean | number[]) => React.MutableRefObject<HTMLButtonElement | null>;

const useCustomRefHook: CustomRefHook = (...dependencies) => {
  const ref = React.useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    // ... do stuff
  }, dependencies)

  return ref;
}

目前，这个钩子的大部分用例都是按钮，但我希​​望最终将其扩展到任何类型的 HTML 元素。我尝试使用HTMLElement而不是HTMLButtonElement，但是我收到以下类型错误：

Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'string | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined'.
  Type 'MutableRefObject<HTMLElement …

我目前正在使用"typescript": "^3.7.5"和"react-slick": "^0.25.2"。

我面临的问题是我无法使用自动播放方法slickPlay以及slickPause新的useRef挂钩和打字稿。

目标：能够使用播放/暂停按钮暂停自动播放和恢复自动播放。我的播放/暂停按钮将位于分页点旁边。

我的代码：

import React, { useStateuseRef } from 'react';

const myComponent = () => {
  const [autoPlayOn, setAutoPlayOn] = useState<boolean>(true);
  const sliderRef = useRef<typeof Slider | null>(null);
  
  <Slider
    ref={sliderRef}
    appendDots={(dots): JSX.Element => (
      <MyButton
        onClick={() => {
          setAutoPlayOn(!autoPlayOn);
          if (autoPlayOn) {
            sliderRef.slickPlay();
          } else {
            sliderRef.slickPause();
          }
        }}
      />
    )}
    {...otherSettings}
  >
}

我收到的类型错误是：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<Settings>): Slider', …

因为我想选择组件的节点元素，所以我想也许我可以使用$refs。

家长

<template>\n    <my-component ref="myComponentElement"></my-component>\n</template>\n\n<script>\n  import MyComponent from "./MyComponent.vue";\n\n  components:{\n     MyComponent\n  },\n    mounted() {\n    const theElement = this.$refs.myComponentElement;\n    \xe2\x80\xa6\n  },\n</script>\n

孩子

<template>\n   <div>\n     <div>test</div>\n   </div>\n</template>\n

我将“ref”添加到组件标签，并使用“this.$refs.myComponentElement”来获取元素。但它没有\xe2\x80\x99 获取节点元素，而是返回一个代理对象。

那么如何选择自定义组件的节点元素呢？我可以使用 $refs 吗？谢谢~

由于 ref().value，我对在 vue 3（脚本设置）中使用 ref() 感到有点困惑。我想知道的是我应该使用 ref().value = ref().value 还是 ref()=ref() 我提供了一个例子：

<script setup>
let stateOne=ref('1')
let stateTwo=ref('2')

//This way:
stateOne.value=stateTwo.value

//Or this:
stateTwo=stateOne

</script>

感谢您帮助我更好地理解这个概念

有什么区别

public function Foo(ref Bar bar)
{
   bar.Prop = 1;
}

public function Foo(Bar bar)
{
   bar.Prop = 1;
}

基本上什么是"参考"的重点.总是通过引用不是一个对象？

我现在正在查看一些C#代码,我想检查一下,在我理解它应该如何工作的时候我不会疯狂.

它与传递System.ServiceModel.Channels.Message有关.采用Message对象的每个方法都有一个类似于此的方法签名:

void SomeMethod(ref Message message) { ... }

我不明白为什么"ref"关键字在那里.据我所知,如果该方法不会完全替换该对象,则不需要它.

void SomeMethod(ref Message message)
{
    message = new Message();
}

但是,如果消息,例如,只是在标题中添加了其他内容,或者只是从对象中读取值,则不需要"ref"关键字,因为Message是引用类型.

void SomeMethod(Message message)
{
    message.Headers.Add("Some Data");  // This should be fine?
}

干杯

我想使用refs功能来访问多个元素。然后，我可以遍历的元素this.tabs。下面的代码不起作用，如何对其进行修复？我现在使用的解决方案是document.querySelectorAll('tabs')，但它似乎不适用于React。

class Comp extends React.Component {
  constructor(props) {
    super(props);
    
    this.tabs = React.createRef();
  }
  
  componentDidMount() {
    console.log(this.tabs);
  }


  render() {
    return (
      <div>
        <span class="tab" ref={this.tabs}>One</span>
        <span class="tab" ref={this.tabs}>Two</span>
        <span class="tab" ref={this.tabs}>Three</span>
      </div>
    );
  }
}

ReactDOM.render(
  <Comp />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>