在 ref 中反应 ref

Question

我使用包裹在 styled-component 中的 react-textarea-autosize，像这样：

import React from 'react'
import styled from 'styled-components'
import TextareaAutosize from 'react-textarea-autosize'

const MyTextArea = styled(TextareaAutosize)``

function Component() {
  return (
    <MyTextArea innerRef={...} />
  )
}

我需要获取底层 html textarea 元素的引用。但是，要实现它，我需要：

可以通过 styled-components' innerRef 属性访问 TextareaAutosize 组件 - <MyTextArea innerRef={textareaResizeable => ...} />
可以通过 react-textarea-autosize' inputRef 属性访问 html textarea 元素 - <TextareaAutosize inputRef={textarea => ...} />

我理解这两个独立的步骤。但是如何直接从 MyTextArea 组件访问 textarea html 元素？

Answer 1

我找到了答案here。所以，在我的例子中，解决方案是这样的：

import React from 'react'
import styled from 'styled-components'
import TextareaAutosize from 'react-textarea-autosize'

const MyTextArea = styled(
  ({_ref, ...props}) => <TextareaAutosize inputRef={_ref} {...props} />
)``

class Component extends React.Component {
  render() {
    return (
      <MyTextArea innerRef={node => this.textarea = node} />
    )
  }
}

然后在需要的地方使用this.textarea。

在 ref 中反应 ref

React ref in ref

reactjs

styled-components