Zugriff Reagieren Komponente Funktionen aus dem äußeren Kontext

Ich habe Class1, die nur ein Container für Class2 ist. Ich erkläre Test Komponente in Class1. Jetzt möchte ich Test in Class2 als Parameter übergeben.Zugriff Reagieren Komponente Funktionen aus dem äußeren Kontext

Ist es möglich, Zugriff auf Test Komponente Kontext innerhalb Class2 an der Stelle, wo ich einen Kommentar?

export default class Class1 extends React.Component { 
    render() { 
     let test = (<Test />); 

     return (
      <Class2 test={test} /> 
     ); 
    } 
} 

export default class Class2 extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     let { test } = this.props; 

     // how to access Test class context? 
     test.setValue("WHERE IS MY CONTEXT?"); 

     return (
      <div>{ test }</div> 
     ); 
    } 
} 

export default class Test extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      value: "" 
     }; 
    } 

    setValue(val) { 
     this.setState({ 
      value: val 
     }); 
    } 

    render() { 
     return (
      <div>{ this.state.value }</div> 
     ); 
    } 
}

Ich habe versucht, etwas auf Web zu finden und das test Objekt zu untersuchen, aber ich fand nichts ... Wenn ich versuche, test.props direkt zuzugreifen ich ein Fehler Reaktion bekommen, dass props nur gelesen werden und kann nicht sein, zugegriffen ...

Quelle

2016-05-16 Nickon

Wenn Sie Zugang zu Kindern Zustand in einem übergeordneten Container benötigen, bewegen Sie den Zustand in den Elternteil. – azium

Was meinst du damit, den Staat zum Elternteil zu machen? Logik von "Test" auf "Class1" verschieben? Ich will das nicht. Mein Projekt ist einfach, aber generische Wizard-Komponente. Es funktioniert folgendermaßen: Ich habe eine Klasse, die eigentlich eine Körperkomponente für den Assistenten ist. Ich übergebe diese Klasse an den Assistenten, aber ich kann mehr als eine Vorlage darin definieren. Daher möchte ich meine Testvorlage informieren, um die Seite einzurichten und zu aktualisieren. Es ist in der gleichen Weise wie dieses Beispiel in der Frage geschrieben. Ich weiß, wie man den Kontext an das Kind weitergibt, aber ist es umgekehrt möglich, vom Kind zum Elternteil? – Nickon

Daten fließen nur von Eltern -> Kind. Aber wie alle anderen Daten können auch Callback-Funktionen übergeben werden, über die Sie untergeordnete Daten als Argument übergeben können, was im Parent behandelt wird. – azium

Verwenden Requisiten statt Zustand:

let { test } = this.props; 

<div>{ React.cloneElement(test, {value: "Hello World"}) }</div>

Und in Test:

<div>{ this.props.value }</div>

PS: Context means something else in React.

Quelle

2016-05-16 14:35:37 Aaron

Ein komplettes Beispiel:

class Class1 extends React.Component { 
    render() { 
     return (
      <Class2> 
       <Test /> 
      </Class2> 
     ); 
    } 
} 

class Class2 extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       {React.cloneElement(this.props.children, {text: "WHERE IS MY CONTEXT?"})} 
      </div> 
     ); 
    } 
} 

class Test extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div>{ this.props.text }</div> 
     ); 
    } 
}

JSFiddle

Quelle

2016-05-16 14:38:38 omerts

Zugriff Reagieren Komponente Funktionen aus dem äußeren Kontext

Antwort

Verwandte Themen