Reagieren - Passing-ref aus dumm-Komponente(child) , smart-Komponente(parent)

Ich habe einen smart und eine dumme Komponente, muss ich haben ref, um ein element, das ist in meinem dump Bestandteil in meinem smart-Komponente:
kann ich pass es mit Requisiten, oder????

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

InformationsquelleAutor Nick1R1 | 2017-03-23

  1. 25

    Könnten Sie die callback-syntax für Referenzen:

    //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} />
    }
}
    Dieser Ansatz funktioniert sehr gut, vielen Dank ! 🙂
    Ich würde es vorziehen, um das callback benutzen statt der übergabe ref Kindern-Komponente, weil Sie halten den Verweis auf die parent-Komponente. Für die einfache Komponente funktioniert gut, aber für die große / komplizierte Komponente gemäß best practice sollten Sie callback verwenden .
    Da ist auch ein Weg, um die Referenz ref in der Blöd-Komponente zu?
    ref in die Dumm-Komponente funktioniert dies nur dom-Elemente, Dumm Komponenten hat sich nicht intances das ist, warum schickt er den DOM zu Dumm, um das übergeordnete Element.
    Wie kann ich eine onChange() zu <input> innen <Dumb> compnent und Holen Sie sich die ref innerhalb der onChange definition einer Funktion im übergeordneten Komponente?

    InformationsquelleAutor Timo

  2. 3

    Als pro DOC:

    Können Sie nicht mit dem ref-Attribut auf funktionale Komponenten, weil
    Sie haben keine Instanzen. Sollten Sie wandeln die Komponenten einer Klasse
    wenn Sie einen ref auf, wie Sie tun, wenn Sie brauchen, lifecycle
    Methoden oder Staat.

    Also ich denke, wenn Sie wollen, verwenden Sie die ref verwenden, benötigen Sie class.

    Prüfen: https://github.com/facebook/react/issues/4936

    InformationsquelleAutor Mayank Shukla

  3. 1

    Mit reagieren^16.0.0 würden Sie Reagieren.createRef(). @Timo, die Antwort, würde es so Aussehen: 

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

    InformationsquelleAutor bbrinx

  4. -1

    Wenn Sie brauchen, dynamische refs, weil Sie ein array oder so, wie ich es Tat. Hier ist, was ich kam mit nach dem Lesen der Antworten.

    Auch dies übernimmt die myList ist ein array von Objekten mit einem key Eigenschaft. Jedenfalls bekommen Sie es.

    Auch diese Lösung funktioniert ohne irgendwelche Probleme aus dem Typoskript als gut.

    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} />)}
        )
    }
}

    Sowieso hoffe, das jemand hilft.

    InformationsquelleAutor Thomas Valadez

Schreibe einen Kommentar