コンポーネント本体の反応関数

Question

このコードをつぶやくと、OnScreenResizeがどのように実装されているか分かりませんが、引数として幅と高さが指定されています。私はこれらのコンポーネントに慣れ親しんでいるとは考えていませんが、特に実装方法を見てみたいと思います。関数が呼び出されると、値

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という関数に渡します。次に返されるものをレンダリングします。この場合、画面の幅に応じて2つのコンポーネントのいずれかになります。

編集：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}) 
}