如题所示,接下来会带你编写一个很简单的react函数组件,首先这是一个很常用的modal弹窗组件alert,其次包含了hook,组件调用和js调用等知识,适合小白入门
hook需要了解
本文要做的是一个Alert
弹窗,可以通过组件调用或者js调用来显示,然后通过点击确定按钮关闭,看起来十分简单,但首先第一步,我们需要了解hook,但本文不会讲解hook,还没看过hook的可以去官网看一下。
这里用到useState
,useEffect
来控制Alert弹窗的显示隐藏。简单来说就是:通过useState
初始化变量(如visible),同时会返回一个设置state的函数(如setVisible),接着在useEffect
里面监听props的变化来动态修改变量visible。说的有点模糊,具体看代码说话:
import React, { useState, useEffect } from 'react'
import * as ReactDOM from 'react-dom'
import './index.less' // 样式不贴出来了
function Alert(props) {
// 通过useState初始化控制变量
const [ visible, setVisible ] = useState(props.visible)
// 当外部的props.visible发生变化时,修改visible的值
useEffect(() => {
setVisible(props.visible);
}, [props.visible]);
// 回调函数
function handleConfirm(){
setVisible(false)
props.onConfirm&&props.onConfirm(false)
}
// title,message的值通过外部控制
return (
<React.Fragment>
{visible && (
<div className="alert-component">
<div className="component-mark"></div>
<div className="alert-container">
<h3 className="alert-title">{props.title}</h3>
<div className="alert-content">{props.message}</div>
<div className="alert-btns">
<button className="alert-confirm" onClick={handleConfirm}>{props.confirmText||'确定'}</button>
</div>
</div>
</div>
)}
</React.Fragment>
);
}
export default Alert
到这一步,就完成了一个简单的函数组件,但是现在的它只能通过组件来调用,接下来改造一下,让它可以通过js的方式调用。
思路:在Alert函数,定义一个show的属性方法,通过它来调用;在show里面,通过ReactDOM
来渲染Alert函数本身,再定义一个close方法来移除Alert。说的不是很清楚,具体看代码说话:
Alert.show = function (title,message,cb) {
const div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(<Alert visible={true} title={title} message={message} onConfirm={close}/>, div)
// 关闭的时候移除对应的DOM节点
function close(){
ReactDOM.unmountComponentAtNode(div)
if (div && div.parentNode) {
div.parentNode.removeChild(div)
}
cb&&cb() //关闭弹窗的回调函数
}
// 这里返回close,可以在外面手动控制关闭,但是这个组件不太需要在外面手动关闭,不返回也可以
return close
};
调用
首先是组件调用:
const [showAlert,setShowAlert] = useState(false)
...
<Alert
visible={showAlert}
title="温馨提示"
message={<p>娃哈哈</p>}
onConfirm={()=>setShowAlert(false)}
/>
接着是js调用:
<button onClick={()=>{
const closeCb = Alert.show('温馨提示','娃哈哈')
setTimeout(closeCb,20*1000) // 延迟20秒自动关闭
}}>js点击打开关闭</button>
总结
到这里就完了,是不是炒鸡简单,你学会了没有