React - ダムコンポーネント（子）からスマートコンポーネント（親）への参照の受け渡し

Question

私は1つのスマートコンポーネントと1つのダムコンポーネントを持っています。スマートコンポーネントのダンプコンポーネントにある要素を参照する必要があります。 私は小道具でそれを渡すか??

Dumb: 
export default (props)=>{ 
return(
    <input type='number' ref='element'}/> 
);} 

Smart: 
class Parent extends Component { 
    constructor(props) { 
     super(props); 
    } 
componentDidMount() { 
    const node = this.refs.element; // undefined 
    } 
render(){ 
    return <Dumb { ...this.props }/> 
    } 
} 

Answer 1

あなたはcallback syntax for refsを使用することができます。

DOC 1として

// Dumb: 
export default props => 
    <input type='number' ref={props.setRef} /> 

// Smart: 
class Parent extends Component { 
    constructor(props) { 
     super(props); 
    } 

    setRef(ref) { 
     this.inputRef = ref; 
    } 

    render(){ 
     return <Dumb {...this.props} setRef={this.setRef} /> 
    } 
} 

Answer 2

：

彼らはインスタンスを持っていないので、あなたは、機能コンポーネントのref属性を使用することはできません。ライフサイクル メソッドまたは状態が必要なときと同じように、コンポーネントを参照する必要がある場合は、コンポーネントをクラス に変換する必要があります。

refを使用する場合は、classを使用する必要があります。

これを確認してください：https://github.com/facebook/react/issues/4936