アセンブリ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レイアウトおよびレイアウトは、最初に符号化することにより、キーを指定されたデフォルトに従って表示され他の値の更新、それは変更されません。
後者は、キーで更新されます。
-
ページング実装技術(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。