react 无状态写法 带参函数的写法和调用

在无状态组件中，无参函数我们可以直接调用如：

    //无参函数
    function extendsArticle() {
        dispatch({
            type: 'forum/extendsArticle',
            payload: {
                IsVisible:IsVisible == 'inline' ? 'none' : 'inline'
            }
        })
    }

   //直接调用
 <button onClick={extendsArticle}>收起  <Icon type="up" /></button>

对于带参函数，上文的写法将导致页面初始化时便调用函数，而状态的改变又会引起页面刷新，最终可能会导致页面函数调用死循环。所以写法有所改变：

  //函数
    function extendsArticle(e) {
    //获取button中的 x的值
        let x = e.target.value
        let res = IsVisible
        res[x] = (IsVisible[x] == "inline" ? "none" : "inline")
        dispatch({
            type: 'forum/extendsArticle',
            payload: {
                IsVisible: res
            }
        })
    }

//调用
 <button value={x} onClick={(e) => { extendsArticle(e) }}>收起  <Icon type="up" /></button>