React props = {this.refs.something} undefined

У меня есть компонент <Modal/> в моей APP.React props = {this.refs.something} undefined

Модаль имеет два метода: show() и hide(), где я изменяю состояние компонента.

В моем приложении у меня есть:

<App> 
    <Modal ref="modal"/> 
    <Menu openModal={this.refs.modal.show}/> 
</App>

Но внутри меню this.props.openModal не определено.

Может кто-нибудь объяснить мне, почему?

источник

2016-04-12 Hiero

Не ответ, но я бы посоветовал вам использовать реквизиты на Modal, чтобы показать или скрыть это. Использование refs в большинстве случаев является антипаттерном, и особенно для таких императивных вызовов. Итак, на openModal вы меняете состояние на {show: true}, а затем передаете show = {this.state.show} в Modal. – iofjuupasli

Я не уверен, что у вас есть опечатка, вместо 'this.refs.modal.show' должно быть' this.refs.modal' –

внутри меню у меня есть элемент, где я хочу запускать модальный open, как можно Я правильно понимаю? – Hiero

Это, вероятно, потому, что во время рендеринга this.refs.modal еще не определен.

Что нужно сделать, так это иметь какое-то состояние в компоненте приложения, а затем обратный вызов для изменения этого состояния, которое передается модулю в качестве опоры.

getInitialState: function() { 
    return {modalOpen: false}; 
}, 
setModalOpen: function(open) { 
    this.setState({modalOpen: false}); 
} 
... 
render: function() { 
    return (
     <App> 
      <Modal open={this.state.modalOpen} setOpen={this.setModalOpen}/> 
      <Menu openModal={this.setModalOpen}/> 
     </App> 
    ); 
}

Вы можете прочитать состояние модального как опору, но отметим также, что компонент Модальные следует использовать функцию обратного вызова, чтобы установить состояние на компоненте App и использовать только пропеллер, а не заменить его с его собственное внутреннее состояние.

источник

2016-04-12 10:36:25

React props = {this.refs.something} undefined

ответ

Смежные вопросы