管理对无状态组件的关注 - 反应

Question

拥有容纳状态的容器组件。 它呈现了许多无状态组件。

我想访问他们所有的DOM节点，所以我可以按需调用焦点方法 。

我正在尝试ref方法，因为它受到反应文档的鼓励 。

我收到以下错误： Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail. Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

推荐的解决此错误的方法是什么？ 最好是没有额外的dom元素包装，如exra divs。 这是我目前的代码：

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

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

无状态（功能）组件不能直接公开引用。 但是，如果它们的内部组件可以使用ref，则可以通过ref转发从无状态组件（父级）的父级（祖父级）传递函数作为ref 。 使用该函数作为DOM元素的ref目标。 现在，祖父母可以直接访问DOM元素ref。

请参阅React文档中的暴露DOM参考到父组件 。

 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> 

Answer 2

试试这个，基本上你把一个回调作为ref传递给无状态组件，它获取输入实例并将它添加到容器拥有的数组中

class Container extends Component {
    constructor() {
        super()
        this._inputs = [];
        this.focusOnFirst = this.focusOnFirst.bind(this)
        this.state = {
            words: [
                'hello',
                'goodbye',
                'see ya'
            ]
        }
    }
    focusOnFirst() {
        this._inputs[0].focus()
    }

    refCallback(ref) {
        this._inputs.push(ref)
    }

    render() {
        return (
            <div>
                {
                    this.state.words.map((word,index)=>{
                        return <StatelessComponent
                        value={word}
                        refCallback={this.refCallback}/>
                    })
                }
                <button onClick={this.focusOnFirst}>Focus on First Stateless Component</button>
            </div>
        )
    }
}

而无国籍人也得到了一点修改

function StatelessComponent({refCallback, value})  {
    return <input ref={refCallback} value={value}/>
}

这是一个工作的plunker