React：將DOM元素屬性傳遞給child

Question

我有一個組件，如下所示：

export default class WebGLCanvas extends Component {
  render() {
    return (
      <div class="canvas-container">
        <Renderer></Renderer>
      </div>
    )
  }
}

但是，為了實例化<Renderer>組件，我需要為它提供一個width和height屬性，該屬性僅在實例化.canvas-container之后定義。

將DOM元素屬性傳遞給子組件的適當方法是什么？

Answer 1

我想你正在嘗試實現一個Renderer ，它需要高度和寬度來計算其子事件的尺寸：

constructor() {
  super();
  this.state = {height: 0, width: 0};
}

componentDidMount() {
  window.addEventListener('resize', this.resetDimensions);
  this.resetDimensions();
}

componentWillUnmount() {
  window.removeEventListener('resize', this.resetDimensions);
}

resetDimensions() {
  var canvasContainer = this.refs.canvasContainer;
  this.setState({width: canvasContainer.clientWidth, height: canvasContainer.clientHeight});
}

上面的代碼基本上將height和width為WebGLCanvas組件的狀態。

使用此方法，您可以將高度和寬度作為道具傳遞給Renderer組件，例如：

return (
    <div className="canvas-container" ref="canvasContainer">
      <Renderer height={this.state.height} width={this.state.width}></Renderer>
    </div>
)

我希望這有幫助。

PS可能需要也可能不需要調用getDOMNode ，具體取決於React版本。

Answer 2

我認為你需要使canvas-container成為自己的組件，將所需的屬性傳遞給它的子組件<Renderer/> 。 就像是：

給定代碼：

export default class WebGLCanvas extends Component {
  render() {
    return <CanvasContainer />; // use the canvas-container component
  }
}

畫布容器：

export default class CanvasContainer extends Component {

  constructor(props) {
    super(props);

    // initialize the state
    this.state = {
      width: 0,
      height: 0
    };
  }

  render() {
    const { width, height } = this.state;
    return <Renderer width={width} height={height}></Renderer>
  }
}

無論您在CanvasContainer設置width和height ，都可以通過以下狀態設置它們：

this.setState({ width, height });

這將重新渲染Renderer組件並將它們傳遞給它的props