web-dev-qa-db-ja.com

React-ダムコンポーネント（子）からスマートコンポーネント（親）にrefを渡す

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 }/>
    }
}
reactjsreduxref
9
Nick1R1

refsのコールバック構文 を使用できます。

// 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} />
    }
}
28
Timo

[〜＃〜] doc [〜＃〜] ：

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

したがって、refを使用する場合は、classを使用する必要があると思います。

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

3
Mayank Shukla

React ^ 16.0.0では、React.createRef（）を使用します。 @Timoの答えを使用すると、次のようになります。

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

// Smart:
class Parent extends Component {
    constructor(props) {
        super(props);
        this.ref1 = React.createRef()
    }

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

動的参照が必要な場合は、私がやったように、配列などがあるためです。上記の回答を読んだ後、私が思いついたものを次に示します。

また、これはmyListがkeyプロパティを持つオブジェクトの配列であることを前提としています。とにかくそれを取得します。

また、このソリューションは、TypeScriptからの問題もなく機能します。

const Child = props => <input ref={refElem => setRef(props.someKey, refElem)} />

class Parent extends Component {

    setRef = (key, ref) => {
      this[key] = ref; // Once this function fires, I know about my child :)
    };

    render(){
        return (
          {myList.map(listItem => <Child someKey={listItem.key} setRef={this.setRef} />)}
        )
    }
}

とにかく、これが誰かを助けることを願っています。

0
Thomas Valadez