Gọi chức năng con từ thành phần gốc trong React Native

Question

Tôi đang phát triển ứng dụng React Native đầu tiên của mình. Những gì tôi đang cố gắng để đạt được là để thực hiện một chức năng trẻ từ các thành phần phụ huynh, đây là tình hình:

Child

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

Chánh

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

Trong ví dụ này , Tôi muốn đăng nhập 'Managed!' khi tôi nhấn nút trong lớp cha. Làm thế nào là nó khả thi?

Answer 1

Bạn có thể thêm ref để các thành phần con:

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

Sau đó gọi phương thức trên con như thế này:

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

Answer 2

Tôi nghĩ rằng bạn đã hiểu lầm điều gì đó về cấu trúc thành phần.

Giả sử rằng con bạn là một thành phần tạo nút cho các thành phần khác của bạn. Trong hệ thống phân cấp này, con bạn phải thông báo cho cha mẹ của nó rằng nó đã được nhấn.

con -----> mẹ

export default class Child extends Component { 

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

Trong mẹ thành phần sử dụng thành phần con của bạn để tạo ra một nút cho bạn. Bằng cách này, bạn có thể sử dụng thành phần con bất kỳ thành phần nào khác dưới dạng nút độc lập. câu trả lời

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 là lỗi thời, vì sử dụng literals String trong ref thuộc tính has been deprecated. Đây là cách chúng tôi sẽ thực hiện vào tháng 9 năm 2017:

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

Cùng một chức năng, nhưng thay vì sử dụng Chuỗi để tham chiếu thành phần, chúng tôi lưu trữ nó trong một biến toàn cục.

Answer 4

Nếu chức năng của bạn không được gọi bởi bất kỳ kích hoạt nhấn, bạn có thể sử dụng

this.props.yourFunction() 

Ví dụ

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

Answer 5

nó là trong phản ứng. tôi hy vọng nó có thể giúp bạn.

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')) 

gốc Giải pháp:

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

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