在 React 中将父组件（即“this”）作为 prop 完全传递给子组件是不是很糟糕？

Question

我有一个复杂的父类，它从服务器获取数据并包含一大堆复杂的逻辑。 我现在想以多种方式呈现这些数据。 将整个 Parent 对象作为道具传递给 Child 有什么问题吗？ 如下：

export class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            some_text = "Hello World"
            many many state things that may be set by fetch
            };

        this.some_method1 = this.some_method1.bind(this);
        ...
        this.some_method100 = this.some_method100.bind(this);
        }

    render(){
        if (this.props.renderas === "child1"){
            return <Child1 parent={this} />
            }
        else {
            return <Child2 parent={this} />
            }
        }
    }

export class Child1 extends React.Component {
    render(){
        return <div>{this.props.parent.state.some_text}</div>
        }
    }

export class Child2 extends React.Component {
    render(){
        return <div>{this.props.parent.state.some_other_thing}</div>
        }
    }

乍一看，这对我来说似乎是个好主意，因为我可以通过多种方式轻松地在 Parent 中渲染数据，而且我不必编写很多prop={this.state.value}行。 我测试了它，它似乎工作正常。

但我很怀疑，因为我没有在网上的任何地方找到这个解决方案，感觉我没有遵循 React 的预期逻辑。 这是否有某种原因被认为是一种糟糕的模式、性能或设计？ 有没有更好的方法来实现同样的目标？

编辑：我刚刚了解到 React Redux 的存在，这基本上就是我所追求的。 来自服务器的所有数据以及与之交互的方法都可以在其中实现，然后我可以让孩子使用商店而不是父组件。 这样就解决了所有问题，除了我现在必须在 React Redux 中重新实现所有内容......

Answer 1

由于某些原因，这似乎是一个不好的做法：它不直观，它肯定是一种代码异味（这意味着，虽然它有效，但它可能隐藏了一些架构缺陷）并且它可能会导致父子之间的引用循环出现问题。

如果您能够使用ES6 Spread运算符，您可以完成类似的操作，如下所示：

export class Parent extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      some_text = "Hello World"
    };
  }

  render(){
    if (this.props.renderas === "child1"){
      return <Child1 {...this.state} />
    } else {
      return <Child2 {...this.state} />
    }
  }
}

export class Child1 extends React.Component {
  render(){
    return <div>{this.props.some_text}</div>
  }
}

Answer 2

React 只允许单向绑定，数据不能以相反的方式流动（例如，双向绑定会发生这种情况），这有一些关键优势：

• 它不太容易出错，因为您可以更好地控制您的数据
• 调试起来更容易，因为你知道什么来自哪里
• 它更有效，因为图书馆已经知道系统每个部分的边界是什么