拥有容纳状态的容器组件 . 它呈现了许多无状态组件 .
我想访问他们所有的DOM节点,所以我可以按需调用focus method .
我正在尝试 ref
方法,因为它是encouraged by the react documentation .
我收到以下错误: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
推荐的解决此错误的方法是什么?最好是没有额外的dom元素包装,如exra divs . 这是我目前的代码:
Container Component - 负责呈现无状态组件 .
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>
)
}
}
Stateless Component - 为简单起见,只需在div中显示文本 .
import React from 'react';
export default function StatelessComponent(props) {
return <div>props.value</div>
}
2 回答
无状态(功能)组件不能直接公开引用 . 但是,如果它们的内部组件可以使用引用,则可以通过ref forwarding将无状态组件(父级)的父级(祖父级)中的函数作为引用传递给引用 . 使用该函数作为DOM元素的ref目标 . 现在,祖父母可以直接访问DOM元素ref .
请参阅React文档中的Exposing DOM Refs to Parent Components .
试试这个,基本上你把一个回调作为ref传递给获取输入实例的无状态组件,并将它添加到容器拥有的数组中
而无国籍人也得到了一点修改
Here's a working plunker