Question

将复杂的Object或类继承到每个ReactJS-Component的最佳方法是什么？

如他们的文档中所述，不推荐使用上下文，我猜使用prop也不是最佳解决方案。

这是我们的情况：

编辑：也许更好的例子是当我们因SSR原因尝试将路由器中的请求对象继承到20级孩子时

我们使用的是在客户端和SSR上工作的路由器。对于每个获得渲染的路由，我们需要在客户端和服务器上使用生成的类。所以一个解决方案应该是这样的：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myAwesomeObject = new AwesomeClass({/* some settings */});
  }
  getChildContext() {
    let { myAwesomeObject } = this;
    return {
      myAwesomeObject
    };
  }
  render(){
    return (
      <span><ComponentLevel1 /></span>
    );
  }
}

const ComponentLevel1 = () => {
  return (
    <div>
      <ComponentLevel2 />
    </div>
  );
};
const ComponentLevel2 = () => {
  return (
    <div>
      <ComponentLevel3 />
    </div>
  );
};
......
const ComponentLevel20 = (props) => {
  content = this.context.myAwesomeObject.doSomeThingWithProps(props);
  return (
    <div>
      {content}
    </div>
  );
};

在这个例子中，我现在能够在我将呈现的每个Component中使用awesomeObject，但ReactJS不推荐使用上下文： https://facebook.github.io/react/docs/context.html

所以现在我的问题是：将所有类继承到所有组件的最佳推荐方法是什么？

我知道：在客户端上这不是问题，因为我可以创建一次对象并在客户端全局上使用它但在服务器（SSR）上我还需要访问创建的类。每次我需要在另一个组件中重新创建对象似乎不是最好的解决方案 - 也不是将此类作为属性添加到任何组件 - 对吧？

修改我编辑了代码片段，表明它可能有一个案例，我的孩子的第20级需要访问该实例。使用上下文它会像我的例子一样工作，但ReactJS说不推荐。所以另一个解决方案是将类添加到我的孩子的属性 - 降低20级 - 但这是否是解决此问题的最佳推荐解决方案？

Answer 1

组成怎么样？（https://facebook.github.io/react/docs/composition-vs-inheritance.html）

class SomeComponent extends React.Component {
    render() {
        return(
            <SomeOtherComponent {...this.props} />
        )
    }
}

通过将所有道具传递给不同的组件（包括它的子组件），您可以轻松地自定义子组件行为。

建议在ReactJS中继承nodeJs的请求对象的方法

1 个答案: