技術標籤：react

1、概念：不按元件的形式傳遞子元件，而是定義一個可以從父元件接收引數的函式

import React from 'react'

export const Name = ({children}) => children("world")

Name元件中擁有定義為函式的children屬性，並且沒有按JSX表示式使用，而是作為函式被呼叫
上述元件的用法如下：

ReactDOM.render(
    <Name>
        {name => <div>Hello, {name}!</div>}
 

    </Name>, document.getElementById('root'));

父元件的渲染方法觸發了子函式，返回了div標籤包裹的Hello, {name}

2、函式子元件優點
（1）可以像高階元件那樣封裝元件，在執行時為它們傳遞變數而不是固定的屬性（由於高階元件擴充套件現有元件的功能的方式主要通過props的增減或者修改原有props。但是高階元件的缺點是對原有元件的props產生了固化）
還是以上節高階元件中的獲取window寬度為例，現在改為以函式子元件形式傳遞如下

import React from 'react';

export const withInnerWidth
 
 = Component => (
    class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                innerWidth: window.innerWidth
            }
        }

        componentDidMount() {
            window.addEventListener('resize', this.handleResize)
 

        }

        handleResize = () => {
            this.setState({
                innerWidth: window.innerWidth
            })
        }

        render() {
            return (
                <Component {...this.props}>
                    {() => <div>視窗寬度為：{this.state.innerWidth}</div>}
                </Component>
            )
        }
    }
)


import React from 'react';
import PropTypes from 'prop-types';
// 此處只需執行children函式即可，展示形式由調用出指定，比以屬性形式傳遞靈活
export default function Button({text, user, children}){
    return (
        <div>
            <div>{user.name}</div>
            <div>{user.subName}</div>
            <div>{user.age}</div>
            {children()}
            <button>{text}</button>
        </div>
    )
}
}


const WithButton = withInnerWidth(Button)
ReactDOM.render(<WithButton text={'提交'}
                            user={{name: '張三', subName: '李四', age: 100}}/>, document.getElementById('root'));

（2）以這種方式組合元件不要求children函式使用預定義的props名稱，開發者可以自行決定函式變數名稱
（3）封裝器的複用程度高，它不關心子元件接收了什麼，只期望傳入一個函式