Прохождение реакции компонента вверх по дереву

Question

В моем приложении мне нужно отображать всплывающие диалоговые окна. Эти диалоги должны располагаться вблизи вершины дерева DOM, чтобы обеспечить правильное позиционирование. На каждой странице может быть разный диалог.

У меня есть структура приложения, как этот

var Dialog = React.createClass({ 
    render: function() { 
     return <div> Hello world! </div> 
    } 
}); 

var Page = React.createClass({ 
    handleClick: function() { 
     this.props.onDialogChange(<Dialog />) 
    }, 
    render: function() { 
    return (
     <div onClick = {this.handleClick}> 
     Click me! 
     </div> 
    ); 
} 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
    return {dialog: null}; 
    }, 
    handleDialogChange: function(dialog) { 
    this.setState({dialog: dialog}); 
    }, 
    render: function { 
    return (
     <div> 
     {this.state.dialog} 
     <Page onDialogChange = {this.handleDialogChange} /> 
     </div> 
    ); 
    } 
}); 

Все работает, но у меня есть предупреждение в консоли

Warning: owner-based and parent-based contexts differ 

я делаю это неправильно, и я должен реорганизовать свою структуру приложения?

Answer 1

Вы сталкиваетесь с проблемой того, как React передает контекст на основе дерева рендеринга. Посмотрите, как React Portal решил эту проблему.

Answer 2

Решил проблему, передав функцию, которая будет создавать компонент, а не сам компонент. Больше никаких предупреждений. Пример будет выглядеть следующим образом:

var Dialog = React.createClass({ 
    render: function() { 
     return <div> {this.props.text} </div> 
    } 
}); 

var Page = React.createClass({ 
    handleClick: function() { 
     this.props.onDialogChange(React.createElement.bind(null, Dialog, {text: 'hello world!'})) 
    }, 
    render: function() { 
    return (
     <div onClick = {this.handleClick}> 
     Click me! 
     </div> 
    ); 
} 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
    return {dialogCreator: null}; 
    }, 
    handleDialogChange: function(dialogCreator) { 
    this.setState({dialogCreator: dialogCreator}); 
    }, 
    render: function { 
    return (
     <div> 
     { this.state.dialogCreator ? this.state.dialogCreator() : null } 
     <Page onDialogChange = {this.handleDialogChange} /> 
     </div> 
    ); 
    } 
}); 

Answer 3

означает предупреждение: ваш компонент страницы (владелец на основе) владеющий Dialog компонент (владелец на основе, где компонент визуализируется). и ваш компонент приложения (родительский) является родителем диалогового окна.

Чтобы решить проблему, вы должны пройти <Dialog/> в <handleDialogChange> компонента приложения, чтобы основанные на владельце и родителях стали такими же. В <Page> вы просто вызываете обработчик для запуска <handleDiaLogChange>