Javascript 在React中将实例变量从一个子组件传递到另一个子组件

我很难理解如何在React（）中传递组件实例变量。我的层次结构如下：

DataView
 |> SharedScale
 |> Graph1
 |> Graph2
 |> ...

其想法是在

SharedScale

中创建一个共享的D3轴/比例，并通过

DataView

包装器将其传递给所有其他图形（即，参考比例应该显示在页面顶部）。例如，当调整组件的大小时，缩放实现可能会发生变化（例如，在我的例子中，它是在

render

函数中创建的）：

我试图在

DataView

中使用

React.createRef

将其组合在一起：

class DataView extends React.Component {   
    constructor(props) {
      super(props);

      this.scaleComponent = React.createRef();
    }

    render() {
        return(
          <div>
            <SharedScale ref={this.scaleComponent} />
            <Graph scaleComponent={this.scaleComponent.current} />                
          </div>
        );
     }
}

类数据视图扩展了React.Component{
建造师（道具）{
超级（道具）；
this.scaleComponent=React.createRef（）；
}
render（）{
返回(
);
}
}

问题是

render（）

函数只调用一次。也就是说，

current

字段始终为

null

---

我是否遗漏了什么，或者这种方法由于某种原因存在根本性缺陷？

事实证明，可以通过调用

componentDidMount

中的

forceUpdate

来触发额外的

render

事件：

class DataView extends React.Component {   
  ...

  componentDidMount() {
    this.forceUpdate();
  }
}

从参考页：

您可以在componentDidMount（）中立即调用setState（）。它将触发额外的渲染，但会在浏览器更新屏幕之前发生。这保证了即使在这种情况下render（）将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它通常会导致性能问题。在大多数情况下，您应该能够在构造函数（）中指定初始状态。但是，对于modals和工具提示这样的情况，当您需要在呈现取决于其大小或位置的对象之前测量DOM节点时，它可能是必需的

这或多或少与调用

forceUpdate

有关

可以找到更新的实时示例

class DataView extends React.Component {   
    constructor(props) {
      super(props);

      this.scaleComponent = React.createRef();
    }

    render() {
        return(
          <div>
            <SharedScale ref={this.scaleComponent} />
            <Graph scaleComponent={this.scaleComponent.current} />                
          </div>
        );
     }
}

class DataView extends React.Component {   
  ...

  componentDidMount() {
    this.forceUpdate();
  }
}