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>
)

我希望这会有所帮助。

P.S。可能需要也可能不需要getDOMNode，这取决于React版本。

Answer 2

我认为你需要让canvas-container自己的组件将所需的属性传递给它的子组件<Renderer/>。类似的东西：

给定代码：

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

Canvas容器：

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>
  }
}

无论您在width中设置height和CanvasContainer，都可以将其设置为州：

this.setState({ width, height });

将重新呈现Renderer组件并将其传递到props

React：将DOM元素属性传递给child

2 个答案: