web-dev-qa-db-fra.com

React - Passage du composant dumb du parent (enfant) au composant intelligent (parent)

J'ai un composant intelligent et un composant idiot, il me faut une référence à un élément qui se trouve dans le composant dump de mon composant intelligent: puis-je le passer avec des accessoires ou ??

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
7
Nick1R1

Vous pouvez utiliser la syntaxe callback pour 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} />
    }
}
22
Timo

Selon DOC :

Vous ne pouvez pas utiliser l'attribut ref sur des composants fonctionnels car ils n'ont pas d'instance. Vous devez convertir le composant en classe si vous avez besoin d'une référence, tout comme vous le faites lorsque vous avez besoin d'un cycle de vie. méthodes ou état.

Je pense donc que si vous voulez utiliser la variable ref, vous devez utiliser la variable class.

Vérifiez ceci: https://github.com/facebook/react/issues/4936

3
Mayank Shukla

Avec react ^ 16.0.0, vous utiliseriez React.createRef (). En utilisant la réponse de @ Timo, cela ressemblerait à ceci: 

// 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} />
    }
}
1
bbrinx