React 方法组件调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

【Message.tsx】<br>import Snackbar from '@material-ui/core/Snackbar'; import Alert from '@material-ui/lab/Alert'; import React from 'react';   export const ShowMessage=(props:any)=>{         const {open,openName,message,onClose,duration,severity} = props;         const location=props.location?props.location:{ vertical: 'top', horizontal: 'right' };         const msg = (<div dangerouslySetInnerHTML={{__html:message}} />)         return (             <Snackbar             open={open}             autoHideDuration={duration}             anchorOrigin={location}             onClose={()=>{onClose(openName)}}>                 <Alert onClose={()=>{onClose(openName)}} severity={severity}>                     {msg}                 </Alert>             </Snackbar>         ) }

　【使用】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

import React from 'react'; import {ShowMessage} from "./Message";   type State = {     msgOpen:boolean     message:string } class Example extends React.Component<{}, State> {   constructor(props: {} | Readonly<{}>) {         super(props);           this.state = {             msgOpen:false,                    message:"",         }     private setStateVal(key: string, value: any) {         let state:any = {};         state[key] = value         this.setState(state)     }    render() {         return (          <ShowMessage                       open={this.state.msgOpen}                       openName='msgOpen'                       message="操作成功"                       onClose={(name:string)=>{this.setStateVal(name,false)}}                       duration={2000}                       severity="success"                      />         )}     }