标签: react-ref

我在定义引用时遇到了一个问题，即

inputRef = React.createRef(null)

//...

const someFunction () => {
 if (this.inputRef && this.inputRef.current) {
   this.inputRef.current.focus()
 }
}

//...

<TextInput ref={inputRef} />

在我访问的地方出现.focus()以下错误

[ts]属性“焦点”在类型“从不”上不存在。[2339]

我能以某种方式告诉我createRef这个ref可以为null或TextInput，以便它知道.focus()可以存在吗？

我有这个

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

和这个

const CompB = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

二_input是input标签的 ref 对象，我找不到它们之间的差异。

我的问题是：两者之间有什么区别_input，哪个_input更好？

“反应”：“^16.13.1”“反应转换组”：“^4.3.0”

  <React.StrictMode>
    <Router>
        <App />
    </Router>
  </React.StrictMode>

嗨，大家好。

我遇到了 findDOMNode 警告，但在互联网上找不到正确的解决方案。

index.js:1 警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 传递了一个 Transition 实例，它在 StrictMode 内...

这个例子是我从off docs here复制的，点击按钮，出现了同样的错误。

const Toolbar = (props) => {
    const [inProp, setInProp] = useState(false);
    return (
        <div>
            <CSSTransition in={inProp} timeout={200} classNames="my-node">
                <div>
                    {"I'll receive my-node-* classes"}
                </div>
            </CSSTransition>
            <button type="button" onClick={() => setInProp(true)}>
                Click to Enter
            </button>
        </div>
    )
};

来自互联网的解决方案建议尝试 createRef（我使用了 usePef 钩子），但是使用 Transitions，它不起作用。

似乎 React.StrictMode 会抛出这样的警告，直到这个库的补丁被合并，但仍然没有看到创建的问题

对于如何解决问题的任何帮助或建议，我将不胜感激

我没有在 reactjs 项目中使用 typescript，但我仍然想用 JSDocs 记录我的组件。

问题是我有一个功能组件，React.forwardRef我想为 ref 创建一个 JSDoc，因为我正在使用useImperativeHandle不同的值并将不同的值传递给 ref。

可以记录ref使用 JSDoc 来显示我传入的方法和属性useImperativeHandle吗？如果是，如何？

我想要的例子在哪里

在组件我用React.fowardRef用useImperativeHandle

export const Foo = React.fowardRef((props, ref) => {

    useImperativeHandle(ref, () => ({
        myMethod,
        // other methods and properties
    }))

    return <div>{/* ... */}</div>
}

当ref将该组件与 一起使用时fooRef.current，我想myMethod在键入.或按Ctrl+时查看或 其他属性Space。

我很难理解为什么打字稿编译器对我在组件中使用的forwardRef不满意。

对于下面的示例，我已将代码精简为最基本的内容，确保此打字稿错误是代码中唯一出现的错误，根据我的实际代码中的问题：

import { createRef, forwardRef, RefObject } from 'react';

const MyComponent = () => {
    const selectCountryRef = createRef<HTMLSelectElement>();

    return (
        <div>
            <SelectCountry ref={selectCountryRef} />
        </div>
    );
};

const SelectCountry = forwardRef((ref?: RefObject<HTMLSelectElement>) => {
    return (
        <FormFieldSelect ref={ref} />
    );
});

const FormFieldSelect = ({ ref }) => {
    return (
        <div>
            <select ref={ref}>
            </select>
        </div>
    );
};

当尝试编译这个时，我收到错误：

Property 'current' is missing in type '{ ref: RefObject<HTMLSelectElement>; }' but required in type 'RefObject<HTMLSelectElement>'.

在 VSCode 中，<SelectCountry …

const Comp1 = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
    print: () => {
      console.log('comp1')
    }
  }), []);
  return <div>comp1</div>
});

const Comp2 = () => <div>comp2</div>;

const App = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);

  useEffect(() => {
    console.log(ref1); // prints ref1 with the expected current  
    console.log(ref2); // prints ref2 with current: null
  })
  return <div><Comp1 ref={ref1}/><Comp2 ref={ref2}/></div>
}

1. Comp1 和 Comp2 参考之间有什么区别？
2. 为什么我必须使用 forwardRef 和 useImperativeHandle 才能真正获得 Comp1 的引用？

https://codepen.io/benma/pen/mddEWjP?editors=1112

我refs用于访问子组件

<MyComponent
   ref='_my_refs'
   ...
/>

并打电话给他们

this.refs._my_refs.scrollToTop();

我收到以下错误

警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

当我调用 someFun 时，我想让 formRef 在屏幕上可见（它位于页面顶部，当我调用 someFun 时我可能已经滚动到底部），有标准方法可以做到这一点吗？

function List(props) {

    const formRef = useRef(null);


    const someFun = params => {

        if (formRef && formRef.current) {
      

          //error FormRef.current.scrollIntoView is not a function
          formRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start' });
        }
    }
}

这是上面父组件中使用的表单组件：它是一个ant design表单组件：链接在这里 https://3x.ant.design/components/form/#header

import { Form, Icon, Input, Button, Checkbox } from 'antd';

class NormalLoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      } …

我有一个table列表，其中每一行都有一个menu按钮，为此我需要一个ref. 我在我的项目中使用 react mui，它是menu。我试过像这样创建参考：

const {rows} = props;
const refs = Array.from({length: rows.length}, a => React.useRef<HTMLButtonElement>(null));

然后尝试map在每个函数上使用像这样的内部函数button：

<Button
   ref={refs[index]}
   aria-controls="menu-list-grow"
   aria-haspopup="true"
   onClick={() => handleToggle(row.id)}
>Velg
</Button>
  <Popper open={!!checkIfOpen(row.id)} anchorEl={refs[index].current} keepMounted transition disablePortal>
    {({TransitionProps, placement}) => (
       <Grow
        {...TransitionProps}
        style={{transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'}}>
       <Paper id="menu-list-grow">
         <ClickAwayListener onClickAway={(e) => handleClose(e, refs[index].current)}>
          <MenuList>                                                        
            <MenuItem
             onClick={(e) => handleClose(e, refs[index].current)}>Profile</MenuItem>
           <MenuItem onClick={(e) => handleClose(e, refs[index].current)}>My account</MenuItem>
           <MenuItem …

我有一个函数组件，它将传入的引用从父组件转发到div它正在渲染的组件。我还想在组件内创建一个 ref 并将其分配给同一个div. 但我不能，因为一个元素只需要一个引用。我是否做错了什么或者有解决类似问题的方法吗？

来自ref父级的是 a React.Ref，但我需要React.RefObject将其传递给像react-use这样的第3方挂钩clickAway： https: //github.com/streamich/react-use/blob/master/docs/useClickAway.md

这是示例组件：

import React, { useRef } from 'react';

type Props = React.PropsWithoutRef<JSX.IntrinsicElements['div']>;

function Component({ ...props }: Props, ref: React.Ref<HTMLDivElement>) {
  const wrapper = useRef<HTMLDivElement>(null);

  return (
    <div
      {...props}
      ref={ref}
      // ref={wrapper}
    />
  );
}

export default React.forwardRef(Component);