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

通过传递将创建组件的函数而不是组件本身来解决问题。再也没有警告了。示例如下：

<?php
$row = ...

$myArray = array(
    'A' => $row['a_value'],
    'B' => $row['b_value'],
    'C' => $row['c_value'],
);

asort($myArray);

echo '<pre>';
print_r($myArray);
echo '</pre>';

Answer 3

警告意味着：您的Page组件（基于所有者）拥有Dialog组件（基于所有者的组件呈现的位置）。您的App组件（基于父级）是Dialog的父级。

要解决此问题，您应该在App组件的<Dialog/>中传递<handleDialogChange>，以便基于所有者和基于父级的内容变得相同。在<Page>中，您只需调用处理程序即可触发<handleDiaLogChange>

将反应组件传递到树上

3 个答案: