Question

我试图从子级调用父类的函数来关闭模态。但是，我总是得到undefined is not an object 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();
}
}

第一个组件是模态框，第二个组件是Camera。我想从Camera组件中关闭第一个模态。我做错了吗？

Answer 1

您要做的是拥有一个父组件，One，将一个函数传递给子，Two，并让子组件调用该函数。从父母到孩子接近传递信息（无论是数据还是函数）的一般方法是通过道具。这可以通过以下方法实现：

<强> One.js

import Two from ‘./Two’;

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

<强> Two.js

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

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

注意我没有必要在Two.js中导入One.js.这是因为在React中，您应该将每个组件视为自己的实体，该实体对使用它的父类一无所知。 Two.js只知道它的父级将使用它并传入一个“closeModal”函数作为它可以使用的道具。

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

祝你好运！

Answer 2

在使用 this.ref.modal 之前，您必须将您的参考设置为ref='modal'。而且你还需要绑定你的函数 closeModal ，然后再将其作为道具传递。

<强> One.js

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

<强> Two.js

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

有关更多信息，请参阅 https://reactjs.org/docs/refs-and-the-dom.html和 https://facebook.github.io/react-native/docs/direct-manipulation.html

React native - 调用函数来关闭另一个组件的模态给出`undefined不是一个对象`

2 个答案: