Function 反应-组件体中的功能

我在tweet中看到了这段代码，我不明白OnScreenResize是如何实现的，以宽度/高度作为参数提供的。我并不认为自己熟悉这些组件，特别是我想看看它是如何实现的。i、 e.如何调用子函数并传递值

const LeftIcon = ({ onDrawerToggle }) => (
<OnScreenResize debounce={50} bounds={[400,500]}>
   {({ width, height }) => 
    width > smallTablet.value 
    ? Component(onDrawerToggle)
    : OtherComponent()}
</OnScreenResize>
)

我不熟悉OnScreenResize组件，但它看起来希望它的子组件是一个函数。这不是大多数组件的工作方式，但它是一个有效的组件。在render上，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})
}

以下是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 });
  }
}

---

当React添加了无状态功能组件，您可以将组件定义为渲染函数时，这种语法就成为可能。它只是定义了一个匿名函数值来代替传统的React组件。我不希望任何人熟悉该组件，这个问题是假设性的。我只是想看看代码的宽度和高度会被忽略，我会接受你的解决方案。我创建了一个小的测试项目，它可以正常工作。非常感谢。