{"id":136846,"date":"2020-07-22T02:38:42","date_gmt":"2020-07-21T18:38:42","guid":{"rendered":"http:\/\/4563.org\/?p=136846"},"modified":"2020-07-22T02:38:42","modified_gmt":"2020-07-21T18:38:42","slug":"%e5%9c%a8%e5%b0%9d%e8%af%95%e7%94%a8-ts-antd4-%e5%86%99%e9%a1%b9%e7%9b%ae%ef%bc%8c%e6%94%b9%e5%86%99%e5%8e%9f-jsx-%e6%96%87%e4%bb%b6%e7%9a%84-message-%e7%bb%84%e4%bb%b6%e7%9b%b8%e5%85%b3%e6%96%b9","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=136846","title":{"rendered":"\u5728\u5c1d\u8bd5\u7528 ts + antd4 \u5199\u9879\u76ee\uff0c\u6539\u5199\u539f jsx \u6587\u4ef6\u7684 message \u7ec4\u4ef6\u76f8\u5173\u65b9\u6cd5\u65f6\u9047\u5230\u4e86\u95ee\u9898"},"content":{"rendered":"
\n
\n
\n

\u5728\u5c1d\u8bd5\u7528 ts + antd4 \u5199\u9879\u76ee\uff0c\u6539\u5199\u539f jsx \u6587\u4ef6\u7684 message \u7ec4\u4ef6\u76f8\u5173\u65b9\u6cd5\u65f6\u9047\u5230\u4e86\u95ee\u9898 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : devwolf <\/span> <\/i> 4<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u6c42\u6559\u2014\u2014\u2014\u2014\u4e0d\u6e05\u695a\u662f vs code \u7684\u539f\u56e0\u8fd8\u662f d.ts \u7684\u539f\u56e0\u8fd8\u662f\u7b14\u8005\u7684\u539f\u56e0 \uff08 orz \u7b14\u8005\u600e\u4e48\u90fd\u89c9\u5f97 JointContent \u662f\u652f\u6301\u5355\u5199\u4e00\u4e2a string \u53c2\u6570\u7684\uff09 \u6700\u8fd1\u521a\u5165\u95e8\u5b8c ts\uff0c\u5728\u628a\u4e00\u4e2a jsx \u6539\u6210 tsx \u65f6\u9047\u5230\u7684\u4e86\u95ee\u9898
ts \u7248\u672c 3.8.3
antd \u7248\u672c ^4.4.2
\u7ec4\u4ef6 message<\/p>\n

import React from 'react' import { Card, Button, message } from 'antd' import { MessageApi ,ArgsProps} from 'antd\/lib\/message'  export default class MessagesPages extends React.Component {      showMessage = (type:keyof MessageApi) => {          message[type](\"\u6d4b\u8bd5\u6587\u672c\");     }      render() {         return (             <div>                 <Card title=\"\u5168\u5c40\u63d0\u793a\u6846\" className=\"card-wrap\">                     <Button type=\"primary\" onClick={() => this.showMessage('success')}>Success<\/Button>                     <Button type=\"primary\" onClick={() => this.showMessage('info')}>Info<\/Button>                     <Button type=\"primary\" onClick={() => this.showMessage('warning')}>Warning<\/Button>                     <Button type=\"primary\" onClick={() => this.showMessage('error')}>Error<\/Button>                     <Button type=\"primary\" onClick={() => this.showMessage('loading')}>Loading<\/Button>                 <\/Card>             <\/div>         );     } }  <\/code><\/pre>\n
\"\u5728\u5c1d\u8bd5\u7528 \"\u5728\u5c1d\u8bd5\u7528<\/p>\n
\u540e\u7eed\u8865\u5145:\u770b\u8d77\u6765\u77e5\u9053\u539f\u56e0\u4e86\uff0c\u786e\u5b9e\u662f\u7b14\u8005\u7684\u95ee\u9898\uff0c\u4e24\u5904 keyof \u7684\u5185\u5bb9\u4e0d\u4e00\u6837 \"\u5728\u5c1d\u8bd5\u7528 orz \u51fa\u6765\u4e22\u4eba\u4e86\uff0c\u7814\u7a76\u7814\u7a76\u600e\u4e48\u6539\uff0c\u7814\u7a76\u5b8c\u4e86\u5c31\u4e0b\u6c89\uff08\u6709\u597d\u5fc3\u7684\u9ad8\u4eba\u63d0\u524d\u544a\u77e5\u7684\u4e00\u4e0b\u7684\u4e5f\u591a\u8c22\u4e86\uff09<\/p>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (1<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : devwolf <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u641e\u5b9a\u662f\u641e\u5b9a\u4e86\uff0c\u770b\u4e0a\u53bb\u662f\u86ee\u602a\u7684\uff0c\u9996\u5148\u662f\u4e0d\u80fd\u5f15\u7528 d.ts \u91cc\u73b0\u6210\u7684 type \u7c7b\u578b\u7528\uff0c\u9f50\u6b21\uff0c\u53c2\u6570\u8fd8\u5f97\u663e\u5f0f\u7684\u90fd\u5b9e\u73b0\u4e00\u904d\uff0cduration \u548c type<\/p>\n
    “`react<\/p>\n
    import React, { ReactNode } from ‘react’
    import { Card, Button, message } from ‘antd’
    \/\/ import { MessageApi, ArgsProps } from ‘antd\/lib\/message’
    import ‘.\/ui.less’<\/p>\n
    interface MessageApi {
     info: “info”,
     success: “success”,
     error: “error”,
     warn:”warn”,
     warning: “warning”,
     loading: “loading”,
     \/\/ open:”open”,
     \/\/ config:”config”,
     \/\/ destroy:”destroy”
    }<\/p>\n
    export default class MessagesPages extends React.Component {<\/p>\n
     showMessage = (type: keyof MessageApi) => {
     message[type]({ content: “\u6d4b\u8bd5\u6587\u672c”, type: type, duration: 3 });
     }<\/p>\n
     render() {
     return (
     <div>
     <Card title=”\u5168\u5c40\u63d0\u793a\u6846” className=”card-wrap”>
     <Button type=”primary” onClick={() => this.showMessage(‘success’)}>Success<\/Button>
     <Button type=”primary” onClick={() => this.showMessage(‘info’)}>Info<\/Button>
     <Button type=”primary” onClick={() => this.showMessage(‘warning’)}>Warning<\/Button>
     <Button type=”primary” onClick={() => this.showMessage(‘error’)}>Error<\/Button>
     <Button type=”primary” onClick={() => this.showMessage(‘loading’)}>Loading<\/Button>
     <\/Card>
     <\/div>
     );
     }
    }<\/p>\n
    “`                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    \u5728\u5c1d\u8bd5\u7528 ts + antd4 \u5199…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/136846"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=136846"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/136846\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=136846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=136846"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=136846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}