реакция - функция в корпусе компонента

Question

Я видел этот код в чириканье, и я не понимаю, как реализован OnScreenResize, так что width/height поставляются в качестве аргументов. Я не знаком с этими компонентами, особенно мне хотелось бы посмотреть, как это можно реализовать. то есть, как дети, как функция вызывается и передается значения

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

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