antd +プロジェクトの概要(2が継続される)と反応

アセンブリwithRouter経路1.パッケージ
2. this.props.location.pathname、リンクルーティング得る
3。

 <Route  path = '/' component = {Admin}/> 

このモデルは、以下の文言のように、正確な=真必要な場合に一致する唯一の正確なファジーマッチであります

<Route  path = '/user' exact = {true} component = {Admin}/> 

4.this.porps.history.replace()ジャンプ経路リンク、動作場合にこの必要下限トリップ。
同様のレンダリングは、ラベル反応ルータ-DOMされているデフォルトジャンプ有する
defaultSelectedKeys selectedKeys差前者の5.antdレイアウトおよびレイアウトは、最初に符号化することにより、キーを指定されたデフォルトに従って表示され他の値の更新、それは変更されません。
後者は、キーで更新されます。

  1. ページング実装技術(2種類)
    1)受信ページング
    要求データを:すべてのデータと、要求ページ送信する必要がありません
    要求インタフェースを:
    必要リクエストパラメータを指定しない:P(PAGENUM)とページ番号(pageSizeを)
    応答データ:すべてのデータの配列

    2)バックグラウンドのページに基づいて
    データを取得するための要求:データのみがこのページ、送信するためのページ要求毎に取得
    :要求インターフェースは
    リクエストパラメータを指定:P(PAGENUM)およびページ番号(pageSizeを)
    応答データ:このページをアレイデータレコードの+合計数(合計)

    3)を選択する方法は?
    基本的にはどのくらいのデータに応じて選択することが

 render: ({status,_id}) => {
                    let btnText = '下架';
                    let text = '在售';
                    if (status === 2) {
                        btnText = '上架';
                        text = '已下架';
                    }
                    return (
                        <span>
                            <Button type='primary' onClick = {() =>{this.updateProductsStatus(_id,status)}}>{btnText}</Button><br />
                            <span>{text}</span>
                        </span>
                    )

7.dangerouslySetInnerHTML使用法:innerHTMLのJSでネイティブのような行為

 <div dangerouslySetInnerHTML={{__html:'<a>123</a>'}}></div>

8.ジャンプルートあなたがデータを運ぶためにしたい場合です

this.props.history.push('path',date)

このプロパティの場所の言葉でHashRouterでこれを使用する場合、これが唯一のBrowserRouterに適用されていない
歴史は通常、次のプロパティとメソッドを持つオブジェクト:

action - (string 类型) 当前的操作(PUSH, REPLACE, POP)
location - (object 类型) 当前的位置。location 会具有以下属性:
pathname - (string 类型) URL 路径
search - (string 类型) URL 中的查询字符串
hash - (string 类型) URL 的哈希片段
state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。
只在浏览器和内存历史中可用。
push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目
replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目
go(n) - (function 类型) 将 history 堆栈中的指针调整 n
goBack() - (function 类型) 等同于 go(-1)
goForward() - (function 类型) 等同于 go(1)
block(prompt) - (function 类型) 阻止跳转。(详见 history 文档)。

9.はじめにbool型の値を与えるために書かれました

this.isUpdate = !!product._id;
this.isUpdate = product?true:false;

{
    title: '创建时间',
    dataIndex: 'create_time',
    // render: create_time => formateDate(create_time)
    render: formateDate
},
//个人对这个写法的理解,就是相当于把formateDate这个函数赋值给render至于传的这个参数就是对应的dataIndex的值
render(create_time);

/*function render(create_time){
     (create_time) => formateDate(create_time);
     formateDate
}
formateDate = () => {};
*/

アップロードコンポーネントのantdを使用して10アップロード写真

action指定的是访问的接口

name是指携带参数的key

listType是指图片的风格

fileList已上传的图片列表

fileList {
    uid: '-1', //唯一标识
    name: 'image.png',//文件名
    status: 'done',//状态 uploading done removed error
    url: '',//图片的地址
  },
  
onPreview点击文件链接或预览图标时的回调
  
onChange={this.handleChange}上传文件状态改变是的回调

文件上传中状态变化的回调函数
handleChange = ({ file, fileList }) => this.setState({ fileList });
这里面的file并不是fileList的最后一项,因此如果在这个时候要操作file的话会出现问题,
可以使用这一行一定要写在上传成功后 file = fileList[fileList.length-1] 把这个file强行换为最后一项。

11.親コンポーネントサブアセンブリのメソッド呼び出し

使用ref
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

12.リッチテキストエディタ

yarn add react-draft-wysiwyg draftjs-to-html

フォームデータthis.form.resetFields 13.antdフォームを()リセット、組立、包装を形成するために
export default Form.create()(Component)
、デフォルトのツリー内のすべてのエントリdefaultExpandAll、拡大14.antd
デフォルトのチェックを:それ以降このdefaultSelectedKeysは、他の選択項目が表示されますを表示する場合問題は、そうであれば、選択した項目は、徐Yaは単にデフォルト表示このcheckedKeysを使用する場合は、変更したい場合は、選択したコンポーネントをクリックして、変更される制御され、プラスoncheckのプロパティ
]ダイアログOnOK呼び出し属性は、この15.antdポップは、それ自体があります
16。

公開された84元の記事 ウォンの賞賛204 ・は 10000 +を見て

おすすめ

転載: blog.csdn.net/qq_44983621/article/details/104031118