Question

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

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

这个想法是在SharedScale中创建一个共享的D3轴/比例，并通过DataView包装器将其传递给所有其他图形（即应该使用参考比例）显示在页面顶部）。例如，当调整组件的大小时（例如，在render函数中创建组件），缩放实现可以更改：

class SharedScale extends React.Component {    
  render() {  
    // Create a D3 scale; i.e. an external library object, which is not serializable
    this.scaleImpl = ...

    // Render a D3 axis using the scale implementation
    return <div>{this.scaleImpl}</div>; 
  }
};

Graph应该获得对SharedScale的引用，并基于它绘制 D3图表：

class Graph extends React.Component {
   render() {    
     //Use the scaleImpl here to render the graph body
     return (
       <div>{get(this.props, "scaleComponent.scaleImpl", "no scale implementation")}</div>
     );
   }
}

我正在尝试使用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>
        );
     }
}

问题在于render()函数仅被调用一次。也就是说，current字段始终为null。

我是否缺少某些东西，或者这种方法由于某种原因而根本存在缺陷？

Answer 1

事实证明，可以通过在render中调用forceUpdate来触发另外的componentDidMount事件：

class DataView extends React.Component {   
  ...

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

在componentDidMount参考页上：

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

这大约equivalent相当于呼叫forceUpdate。

可以在here中找到更新的实时示例。

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

1 个答案: