Question

我在推文中看到了这段代码，我不明白如何实现OnScreenResize，以便将宽度/高度作为参数提供。我不熟悉这些组件，特别是我想知道它是如何实现的。即如何调用子函数作为函数并传递值

./read

Answer 1

这是OnScreenResize的实施方式：

class OnScreenResize extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 0    
    };
    this.updateWidthAndHeight = this.updateWidthAndHeight.bind(this);
  }

  componentWillMount() {
    this.updateWidthAndHeight();
    window.addEventListener('resize', this.updateWidthAndHeight);
  }

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

  updateWidthAndHeight() {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }

  render() {
    const { width, height } = this.state;
    return this.props.children({ width, height });
  }
}

Answer 2

我不熟悉OnScreenResize组件，但看起来它期望children成为一个函数。这不是大多数组件的工作方式，但它是一个有效的组件。因此，在渲染时，OnScreenResize计算宽度和高度，并将其传递给this.props.children函数。然后它呈现返回的内容，在这种情况下，它将是两个组件之一，具体取决于屏幕宽度。

编辑：添加OnScreenResize组件的示例实现。

const OnScreenResize = ({children}) => {
  let width = 100 // get width from browser
  let height = 100 // get height from browser
  // TODO: error check that children is actually a function instead of assuming.
  return children({width: width, height: height})
}

反应 - 在组件体中起作用

2 个答案: