React Native

Question

Ana bileşenden çocuk işlevini çağırın İlk React Native uygulamasını geliştiriyorum.

Çocuk

export default class Child extends Component { 
    ... 
    myfunct: function() { 
    console.log('Managed!'); 
    } 
    ... 
    render(){ 
    return(
     <Listview 
     ... 
     /> 
    ); 
    } 
} 

Veli

export default class Parent extends Component { 
    ... 
    execChildFunct: function() { 
    ... 
    //launch child function "myfunct" 
    ... 
    //do other stuff 
    } 

    render(){ 
    return(
     <View> 
     <Button onPress={this.execChildFunct} /> 
     <Child {...this.props} /> 
     </View>); 
    } 
} 

Bu örnekte: Ne elde etmek çalışıyorum ebeveyn bileşeninden bir çocuk işlevi yürütmek için, bu durum ise Ebeveyn sınıfındaki düğmeye bastığımda 'Managed!''u günlüğe kaydetmek istiyorum. Bu nasıl uygulanabilir?

Answer 1

Sen çocuk bileşenine bir ref ekleyebilirsiniz:

<Child ref='child' {...this.props} /> 

Sonra böyle çocuğa yöntemini çağırın:

<Button onPress={this.refs.child.myfunc} /> 

Answer 2

Sana bileşen yapısı hakkında bir şeyler yanlış anlamış düşünüyorum.

Çocuğunuzun, diğer bileşenleriniz için düğme üreten bir bileşen olduğunu varsayalım. Bu hiyerarşide çocuğunuz, basıldığını ebeveynine bildirmelidir.

çocuk -----> sizin için bir düğme oluşturmak için ana bileşen kullanımı çocuk bileşeninde ebeveyn

export default class Child extends Component { 

    return(
    <Button onPress={this.props.onPress } /> 
    ); 
    } 

. Bu şekilde çocuk bileşenini başka herhangi bir bileşeni bağımsız bir düğme olarak kullanabilirsiniz. ref dize değişmezleri kullanılarak has been deprecated nitelikleri beri

export default class Parent extends Component { 
constructor(props) { 
    super(props); 
    this.execChildFunct=this.execChildFunct.bind(this) 
    } 

    execChildFunct: function() { 
    console.log('Managed!'); 
    } 
    return (
    <Child onPress = {this.execChildFunct}></Child> 
) 

} 

Answer 3

Nader Dabit cevabı, eski. Bu, Eylül 2017 itibariyle bunu görecektir:, ancak bunun yerine bileşeni başvurmak için bir dize kullanarak

<Child ref={child => {this.child = child}} {...this.props} /> 
<Button onPress={this.child.myfunc} /> 

Aynı işlevsellik, bunun yerine genel değişken saklayın. Fonksiyonun herhangi basarak tetikleyici tarafından çağrılabilir etmezse

Answer 4

, bunu ise tepki Örnek

componentDidMount(){ 
    this.props.yourFunction() 
} 

Answer 5

this.props.yourFunction() 

kullanabilirsiniz. Umarım size yardımcı olabilir.

---

class Child extends React.Component { 
    componentDidMount() { 
    this.props.onRef(this) 
    } 
    componentWillUnmount() { 
    this.props.onRef(null) 
    } 
    method() { 
    console.log('do stuff') 
    } 
    render() { 
    return <h1>Hello World!</h1> 
    } 
} 

class EnhancedChild extends React.Component { 
     render() { 
     return <Child {...this.props} /> 
     } 
    } 

class Parent extends React.Component { 
    onClick =() => { 
    this.child.method() // do stuff 
    }; 
    render() { 
    return (
     <div> 
     <EnhancedChild onRef={ref => (this.child = ref)} /> 
     <button onClick={this.onClick}>Child.method()</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Parent />, document.getElementById('root')) 

Orjinal Çözüm:

https://jsfiddle.net/frenzzy/z9c46qtv/

https://github.com/kriasoft/react-starter-kit/issues/909