反应本机-调用函数以从另一个组件关闭模态给出'未定义不是对象'

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.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函数作为道具时，关键部分在One.js中。然后，在Two.js中，您可以访问传递到“ this.props”对象中的类的所有道具。

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

您可以阅读有关道具的更多信息，并在此处查看示例。要了解有关使用React进行分层思考的更多信息，请查看本指南

祝好运！