javascript - 管理对无状态组件的关注 - React

Question

有一个保存状态的容器组件。它呈现了许多无状态组件。

我想访问他们所有的 DOM 节点，所以我可以调用 focus method一经请求。

我正在尝试 ref 方法，因为它是 encouraged by the react documentation .

我收到以下错误:警告:无状态函数组件不能被赋予引用。尝试访问此引用将失败。

解决此错误的推荐方法是什么？最好不要像 exra div 这样的额外 dom 元素包装器。这是我当前的代码:

容器组件 - 负责呈现无状态组件。

import React, { Component } from 'react';
import StatelessComponent from './components/stateless-component.jsx'

class Container extends Component {
    constructor() {
        super()
        this.focusOnFirst = this.focusOnFirst.bind(this)
        this.state = {
            words: [
                'hello',
                'goodbye',
                'see ya'
            ]
        }
    }
    focusOnFirst() {
        this.node1.focus()
    }
    render() {
        return (
            <div>
                {
                    this.state.words.map((word,index)=>{
                        return <StatelessComponent
                        value={word}
                        ref={node => this[`node${index}`] = node}/>
                    })
                }
                <button onClick={this.focusOnFirst}>Focus on First Stateless Component</button>
            </div>
        )
    }
}

无状态组件 - 为了简单起见，只在 div 中显示文本。

import React from 'react';
export default function StatelessComponent(props)  {
    return <div>props.value</div>
}

Answer 1

无状态(功能)组件不能直接公开引用。但是，如果它们的内部组件可以使用 refs，则可以通过 ref forwarding 将来自无状态组件(父级)的父级(祖父级)的函数作为 ref 传递。 .使用该函数作为 DOM 元素的引用目标。现在祖 parent 可以直接访问 DOM 元素 ref。

参见 Exposing DOM Refs to Parent Components在 React 的文档中。

const StatelessComponent = React.forwardRef((props, ref) => (
  <div>
    <input ref={ref} {...props} />
  </div>
));

class Container extends React.Component { 
  itemRefs = []

  componentDidMount() {
    this.focusOnFirst();
  }

  focusOnFirst = () => this.itemRefs[0].focus()

  inputRef = (ref) => this.itemRefs.push(ref)

  render() {
    return (
      <div>
        <StatelessComponent ref={this.inputRef} />
        <StatelessComponent ref={this.inputRef} />
      </div>
    )
  }
}

ReactDOM.render(
  <Container />,
  demo
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>