Javascript React native-调用函数从另一个组件关闭模态，并给出“undefined”不是对象`

我试图从child调用父类的函数来关闭modal。然而，我总是得到未定义的对象不是this.ref.modal

这就是我所拥有的：

1st 

Import Two from ‘./Two’;


export default class One extends Component {
    static closeModal(){
            this.refs.modal.close();
    }
    <Modal>
    </Two>
    </Modal>
}

2nd

Import One from ‘./One’;

export default class Two extends Component {
    randomFunction(){
       One.CloseModal();
}
}

---

第一个组件是modalbox，第二个组件是Camera。我想从相机组件关闭第一个模态。我做错什么了吗？

您试图做的是让父组件，一，将函数传递给子组件，二，让子组件调用函数。从父级向子级传递信息（无论是数据还是函数）的一般方法是通过道具。这可以通过以下方法实现：

1.js

当我实例化两个组件并将closeModal函数作为一个道具传入时，关键部分在One.js中。然后，在Two.js中，您可以访问this.props对象中传递到类中的所有props

请注意，我不必在Two.js中导入One.js。这是因为在React中，您应该将每个组件视为自己的实体，而不知道使用它的父类的任何信息。Two.js只知道它的父级将使用它，并将closeModal函数作为它可以使用的道具传入

您可以阅读更多有关道具的信息，并查看示例。要阅读更多关于使用react进行分层思考的信息，您可以查看

---

祝你好运

您要做的是让父组件，一，将函数传递给子组件，二，然后让子组件调用函数。从父级向子级传递信息（无论是数据还是函数）的一般方法是通过道具。这可以通过以下方法实现：

1.js

当我实例化两个组件并将closeModal函数作为一个道具传入时，关键部分在One.js中。然后，在Two.js中，您可以访问this.props对象中传递到类中的所有props

请注意，我不必在Two.js中导入One.js。这是因为在React中，您应该将每个组件视为自己的实体，而不知道使用它的父类的任何信息。Two.js只知道它的父级将使用它，并将closeModal函数作为它可以使用的道具传入

您可以阅读更多有关道具的信息，并查看示例。要阅读更多关于使用react进行分层思考的信息，您可以查看

祝你好运

在使用this.ref.modal之前，必须将ref设置为ref='modal'。在将函数作为道具传递之前，还需要绑定函数closeModal

1.js

有关更多信息，请参阅 和

在使用此.ref.modal之前，必须将ref设置为ref='modal'。在将函数作为道具传递之前，还需要绑定函数closeModal

1.js

有关更多信息，请参阅 和

---

感谢您的精彩解释！这对我帮助很大。谢谢你的解释！这对我帮助很大。

import Two from ‘./Two’;

export default class One extends Component {
    closeModal(){
        this.refs.modal.close();
    }
    render() {
        return (
            <Modal>
                <Two closeModal={this.closeModal} />
            </Modal
        )
    }
}

export default class Two extends Component {
    randomFunction() {
        this.props.closeModal()
    }
}

import Two from './Two'

export default class One extends Component {
    closeModal(){
        this.refs.modal.close();
    }

    render() {
        return (
            <Modal ref='modal'>
                <Two closeModal={() => this.closeModal()} />
            </Modal
        )
    }
}

export default class Two extends Component {
    randomFunction() {
        this.props.closeModal()
    }
}