home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-15 07:46:41 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
0cdb82d30e6d3c1d98fcd3e20dfcd82df60e94af
ant-design/docs/react/upgrade-notes.html
T
Benjy Cui 0cdb82d30e Updates
2016-11-25 11:54:01 +08:00

84 lines
43 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ant Design - An enterprise-class UI design language and React-based implementation">
<title>Ant Design - One Design Language</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
</head>
<body>
<div id="react-content" hidden>
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1327032422"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="docs/react/introduce" data-reactid="47">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="docs/react/getting-started" data-reactid="49">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="50"><a href="docs/react/install" data-reactid="51">Installation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="docs/react/practical-projects" data-reactid="53">Practical Projects</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="docs/react/customize-theme" data-reactid="55">Customize theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="changelog" data-reactid="57">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="58"><a href="docs/react/upgrade-notes" data-reactid="59">Upgrade Notes</a></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="60"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480046017515_5" aria-haspopup="true" data-reactid="61"><h4 data-reactid="62">Components</h4></div><!-- react-empty: 63 --></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="64"><article class="markdown" data-reactid="65"><h1 data-reactid="66"><!-- react-text: 67 -->Upgrade Notes<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/react/upgrade-notes.md" data-reactid="68"><i class="anticon anticon-edit" data-reactid="69"></i></a></h1><section class="markdown" data-reactid="70"><p data-reactid="71"><!-- react-text: 72 -->此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 <!-- /react-text --><a href="/changelog" data-reactid="73">更新日志</a><!-- react-text: 74 -->。<!-- /react-text --></p><h2 id="1.x-=&gt;-2.x" data-reactid="75"><span data-reactid="76"><!-- react-text: 77 -->1.x =&gt; 2.x<!-- /react-text --></span><a href="#1.x-=&gt;-2.x" class="anchor" data-reactid="78">#</a></h2><p data-reactid="79"><code data-reactid="80"><!-- react-text: 81 -->1.0.0<!-- /react-text --></code><!-- react-text: 82 --> 之后将不再单独提供升级指南，请参考对应版本 <!-- /react-text --><a href="/changelog#2.0.0" data-reactid="83">更新日志</a><!-- react-text: 84 --> 中的 <!-- /react-text --><code data-reactid="85"><!-- react-text: 86 -->不兼容改动<!-- /react-text --></code><!-- react-text: 87 --> 部分进行升级。<!-- /react-text --></p><h2 id="0.12-=&gt;-1.x" data-reactid="88"><span data-reactid="89"><!-- react-text: 90 -->0.12 =&gt; 1.x<!-- /react-text --></span><a href="#0.12-=&gt;-1.x" class="anchor" data-reactid="91">#</a></h2><p data-reactid="92"><code data-reactid="93"><!-- react-text: 94 -->1.0.0<!-- /react-text --></code><!-- react-text: 95 --> 之后将不再单独提供升级指南，请参考对应版本 <!-- /react-text --><a href="/changelog#1.0.0" data-reactid="96">更新日志</a><!-- react-text: 97 --> 中的 <!-- /react-text --><code data-reactid="98"><!-- react-text: 99 -->不兼容改动<!-- /react-text --></code><!-- react-text: 100 --> 部分进行升级。<!-- /react-text --></p><h2 id="0.11-=&gt;-0.12" data-reactid="101"><span data-reactid="102"><!-- react-text: 103 -->0.11 =&gt; 0.12<!-- /react-text --></span><a href="#0.11-=&gt;-0.12" class="anchor" data-reactid="104">#</a></h2></section><section class="toc" data-reactid="105"><ul data-reactid="106"><li data-reactid="107"><a href="#0.10-=&gt;-0.11" data-reactid="108"><!-- react-text: 109 -->0.10 =&gt; 0.11<!-- /react-text --></a></li><li data-reactid="110"><a href="#0.9-=&gt;-0.10" data-reactid="111"><!-- react-text: 112 -->0.9 =&gt; 0.10<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="113"><h3 id="使用-Form-提供的校验功能代替-Validation" data-reactid="114"><span data-reactid="115"><!-- react-text: 116 -->使用 Form 提供的校验功能代替 Validation<!-- /react-text --></span><a href="#使用-Form-提供的校验功能代替-Validation" class="anchor" data-reactid="117">#</a></h3><p data-reactid="118"><!-- react-text: 119 -->Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子（<!-- /react-text --><a href="http://ant.design/components/form/#demo-validate-basic" data-reactid="120"><!-- react-text: 121 -->#1<!-- /react-text --></a><!-- react-text: 122 --> <!-- /react-text --><a href="http://ant.design/components/form/#demo-validate-other" data-reactid="123"><!-- react-text: 124 -->#2<!-- /react-text --></a><!-- react-text: 125 --> <!-- /react-text --><a href="http://ant.design/components/form/#demo-validate-customized" data-reactid="126"><!-- react-text: 127 -->#3<!-- /react-text --></a><!-- react-text: 128 -->）。<!-- /react-text --></p><h3 id="Progress-format-属性的值改为函数" data-reactid="129"><span data-reactid="130"><!-- react-text: 131 -->Progress <!-- /react-text --><code data-reactid="132"><!-- react-text: 133 -->format<!-- /react-text --></code><!-- react-text: 134 --> 属性的值改为函数<!-- /react-text --></span><a href="#Progress-format-属性的值改为函数" class="anchor" data-reactid="135">#</a></h3><p data-reactid="136"><!-- react-text: 137 -->把使用了 <!-- /react-text --><code data-reactid="138"><!-- react-text: 139 -->format<!-- /react-text --></code><!-- react-text: 140 --> 属性的代码，如：<!-- /react-text --></p><pre class="language-jsx" data-reactid="141"><code data-reactid="142"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Progress.Circle</span> <span class="token attr-name" >percent</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token number" >100</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >format={&lt;Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>check<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >}</span> <span class="token operator" >/</span><span class="token operator" >></span></code></pre><p data-reactid="143"><!-- react-text: 144 -->改为：<!-- /react-text --></p><pre class="language-jsx" data-reactid="145"><code data-reactid="146"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Progress.Circle</span> <span class="token attr-name" >percent</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token number" >100</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >format</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>check<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span></code></pre><h3 id="Tree" data-reactid="147"><span data-reactid="148"><!-- react-text: 149 -->Tree<!-- /react-text --></span><a href="#Tree" class="anchor" data-reactid="150">#</a></h3><ul data-reactid="151"><li data-reactid="152"><p data-reactid="153"><code data-reactid="154"><!-- react-text: 155 -->onSelect<!-- /react-text --></code><!-- react-text: 156 --> 回调函数，由原来的<!-- /react-text --><code data-reactid="157"><!-- react-text: 158 -->一个<!-- /react-text --></code><!-- react-text: 159 -->参数，变为<!-- /react-text --><code data-reactid="160"><!-- react-text: 161 -->两个<!-- /react-text --></code><!-- react-text: 162 -->，第一个为<!-- /react-text --><code data-reactid="163"><!-- react-text: 164 -->selectedKeys<!-- /react-text --></code><!-- react-text: 165 -->，第二个参数为原来第一个参数里的其余信息。另外<!-- /react-text --><code data-reactid="166"><!-- react-text: 167 -->selectedKeys<!-- /react-text --></code><!-- react-text: 168 -->里包含了当前选中的节点key，而原来的不包含。<!-- /react-text --></p></li><li data-reactid="169"><p data-reactid="170"><code data-reactid="171"><!-- react-text: 172 -->onCheck<!-- /react-text --></code><!-- react-text: 173 --> 回调函数，由原来的<!-- /react-text --><code data-reactid="174"><!-- react-text: 175 -->一个<!-- /react-text --></code><!-- react-text: 176 -->参数，变为<!-- /react-text --><code data-reactid="177"><!-- react-text: 178 -->两个<!-- /react-text --></code><!-- react-text: 179 -->，第一个为<!-- /react-text --><code data-reactid="180"><!-- react-text: 181 -->checkedKeys<!-- /react-text --></code><!-- react-text: 182 -->，第二个参数为原来第一个参数里的其余信息。另外<!-- /react-text --><code data-reactid="183"><!-- react-text: 184 -->checkedKeys<!-- /react-text --></code><!-- react-text: 185 -->里包含了当前选中的节点key，而原来的不包含（这样免去业务里自己组装key的工作）。<!-- /react-text --></p></li><li data-reactid="186"><p data-reactid="187"><!-- react-text: 188 -->异步API中<!-- /react-text --><code data-reactid="189"><!-- react-text: 190 -->onDataLoaded<!-- /react-text --></code><!-- react-text: 191 -->重命名为<!-- /react-text --><code data-reactid="192"><!-- react-text: 193 -->loadData<!-- /react-text --></code><!-- react-text: 194 -->，其他不用改。<!-- /react-text --></p></li></ul><h2 id="0.10-=&gt;-0.11" data-reactid="195"><span data-reactid="196"><!-- react-text: 197 -->0.10 =&gt; 0.11<!-- /react-text --></span><a href="#0.10-=&gt;-0.11" class="anchor" data-reactid="198">#</a></h2><hr data-reactid="199"/><p data-reactid="200"><code data-reactid="201"><!-- react-text: 202 -->0.11.x<!-- /react-text --></code><!-- react-text: 203 --> 版本有大量更新，其中部分为不兼容更新。以下列表为其中不兼容的更新及对应升级方案。如果您在升级过程中遇到下面没有提到的情况，可以到 Github 上面咨询。<!-- /react-text --></p><ul data-reactid="204"><li data-reactid="205"><p data-reactid="206"><code data-reactid="207"><!-- react-text: 208 -->0.11.x<!-- /react-text --></code><!-- react-text: 209 --> 文档：<!-- /react-text --><a href="http://ant.design" data-reactid="210"><!-- react-text: 211 -->http://ant.design<!-- /react-text --></a></p></li><li data-reactid="212"><p data-reactid="213"><code data-reactid="214"><!-- react-text: 215 -->0.10.x<!-- /react-text --></code><!-- react-text: 216 --> 文档：<!-- /react-text --><a href="http://010x.ant.design" data-reactid="217"><!-- react-text: 218 -->http://010x.ant.design<!-- /react-text --></a></p></li></ul><h3 id="默认加载样式" data-reactid="219"><span data-reactid="220"><!-- react-text: 221 -->默认加载样式<!-- /react-text --></span><a href="#默认加载样式" class="anchor" data-reactid="222">#</a></h3><p data-reactid="223"><!-- react-text: 224 -->样式现在不再会在 <!-- /react-text --><code data-reactid="225"><!-- react-text: 226 -->antd<!-- /react-text --></code><!-- react-text: 227 --> 中默认加载，如果升级后没有样式，开发者需要手动自行引入样式。<!-- /react-text --></p><pre class="language-js" data-reactid="228"><code data-reactid="229"><span class="token keyword" >import</span> <span class="token string" >'antd/lib/index.css'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// 或者</span>
<span class="token keyword" >import</span> <span class="token string" >'antd/style/index.less'</span><span class="token punctuation" >;</span></code></pre><h3 id="表格远程模式" data-reactid="230"><span data-reactid="231"><!-- react-text: 232 -->表格远程模式<!-- /react-text --></span><a href="#表格远程模式" class="anchor" data-reactid="233">#</a></h3><p data-reactid="234"><code data-reactid="235"><!-- react-text: 236 -->Table<!-- /react-text --></code><!-- react-text: 237 --> 的 <!-- /react-text --><code data-reactid="238"><!-- react-text: 239 -->dataSource<!-- /react-text --></code><!-- react-text: 240 --> 远程模式被移除，用户需要自行实现数据获取方式，ajax 获取数据的演示可以参见 <!-- /react-text --><a href="http://ant.design/components/table/#demo-ajax" data-reactid="241"><!-- react-text: 242 -->演示<!-- /react-text --></a><!-- react-text: 243 -->。<!-- /react-text --></p><h3 id="Timepicker、Datepicker-重命名" data-reactid="244"><span data-reactid="245"><!-- react-text: 246 -->Timepicker、Datepicker 重命名<!-- /react-text --></span><a href="#Timepicker、Datepicker-重命名" class="anchor" data-reactid="247">#</a></h3><p data-reactid="248"><code data-reactid="249"><!-- react-text: 250 -->Timepicker<!-- /react-text --></code><!-- react-text: 251 --> 被重命名为 <!-- /react-text --><code data-reactid="252"><!-- react-text: 253 -->TimePicker<!-- /react-text --></code><!-- react-text: 254 -->，<!-- /react-text --><code data-reactid="255"><!-- react-text: 256 -->Datepicker<!-- /react-text --></code><!-- react-text: 257 --> 被重命名为 <!-- /react-text --><code data-reactid="258"><!-- react-text: 259 -->DatePicker<!-- /react-text --></code><!-- react-text: 260 -->，需要做以下改动：<!-- /react-text --></p><pre class="language-jsx" data-reactid="261"><code data-reactid="262"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Timepicker</span> <span class="token punctuation" >/></span></span> <span class="token operator" >==</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>TimePicker</span> <span class="token punctuation" >/></span></span></code></pre><pre class="language-jsx" data-reactid="263"><code data-reactid="264"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Datepicker</span> <span class="token punctuation" >/></span></span> <span class="token operator" >==</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>DatePicker</span> <span class="token punctuation" >/></span></span></code></pre><p data-reactid="265"><!-- react-text: 266 -->相应的，两个组件的文档地址也改为 <!-- /react-text --><a href="/components/date-picker" data-reactid="267">/components/date-picker</a><!-- react-text: 268 --> 和 <!-- /react-text --><a href="/components/time-picker" data-reactid="269">/components/time-picker</a><!-- react-text: 270 -->。<!-- /react-text --></p><h3 id="受控的-DatePicker" data-reactid="271"><span data-reactid="272"><!-- react-text: 273 -->受控的 DatePicker<!-- /react-text --></span><a href="#受控的-DatePicker" class="anchor" data-reactid="274">#</a></h3><p data-reactid="275"><!-- react-text: 276 -->由于 <!-- /react-text --><code data-reactid="277"><!-- react-text: 278 -->DatePicker<!-- /react-text --></code><!-- react-text: 279 --> 已改为 <!-- /react-text --><a href="https://facebook.github.io/react/docs/forms.html#controlled-components" data-reactid="280"><!-- react-text: 281 -->受控组件<!-- /react-text --></a><!-- react-text: 282 -->，所以 <!-- /react-text --><code data-reactid="283"><!-- react-text: 284 -->DatePicker<!-- /react-text --></code><!-- react-text: 285 --> 显示的值必然与其 <!-- /react-text --><code data-reactid="286"><!-- react-text: 287 -->value<!-- /react-text --></code><!-- react-text: 288 --> 一致。<!-- /react-text --></p><p data-reactid="289"><!-- react-text: 290 -->如果无法理解受控组件，只须在发现在选中日期后 <!-- /react-text --><code data-reactid="291"><!-- react-text: 292 -->Datepicker<!-- /react-text --></code><!-- react-text: 293 --> 显示的值不变的情况后，把其 <!-- /react-text --><code data-reactid="294"><!-- react-text: 295 -->value<!-- /react-text --></code><!-- react-text: 296 --> 属性改为 <!-- /react-text --><code data-reactid="297"><!-- react-text: 298 -->defaultValue<!-- /react-text --></code><!-- react-text: 299 --> 即可。<!-- /react-text --></p><h3 id="TimePicker-locale-结构改变" data-reactid="300"><span data-reactid="301"><!-- react-text: 302 -->TimePicker locale 结构改变<!-- /react-text --></span><a href="#TimePicker-locale-结构改变" class="anchor" data-reactid="303">#</a></h3><p data-reactid="304"><!-- react-text: 305 -->属性 <!-- /react-text --><code data-reactid="306"><!-- react-text: 307 -->locale<!-- /react-text --></code><!-- react-text: 308 --> 结构发生了 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/commit/fd1312803fd49586ded9af39d923457540c515cc#diff-fe4bfc98d91fc3dab8f391e3258622d4L1" data-reactid="309"><!-- react-text: 310 -->变化<!-- /react-text --></a><!-- react-text: 311 -->，需要将原有的属性改为现有的<!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384" data-reactid="312"><!-- react-text: 313 -->结构<!-- /react-text --></a><!-- react-text: 314 -->。<!-- /react-text --></p><h3 id="其他" data-reactid="315"><span data-reactid="316"><!-- react-text: 317 -->其他<!-- /react-text --></span><a href="#其他" class="anchor" data-reactid="318">#</a></h3><ul data-reactid="319"><li data-reactid="320"><p data-reactid="321"><!-- react-text: 322 -->Alert 组件默认不展示样式，可以用 <!-- /react-text --><code data-reactid="323"><!-- react-text: 324 -->showIcon<!-- /react-text --></code><!-- react-text: 325 --> 属性添加图标。<!-- /react-text --></p></li><li data-reactid="326"><p data-reactid="327"><!-- react-text: 328 -->在 <!-- /react-text --><code data-reactid="329"><!-- react-text: 330 -->0.10.x<!-- /react-text --></code><!-- react-text: 331 --> 中 Datepicker 已废弃的 <!-- /react-text --><code data-reactid="332"><!-- react-text: 333 -->onSelect<!-- /react-text --></code><!-- react-text: 334 --> 属性被删除，请使用 <!-- /react-text --><code data-reactid="335"><!-- react-text: 336 -->onChange<!-- /react-text --></code><!-- react-text: 337 --> 属性。。<!-- /react-text --></p></li><li data-reactid="338"><p data-reactid="339"><!-- react-text: 340 -->TimePicker 的 <!-- /react-text --><code data-reactid="341"><!-- react-text: 342 -->hourOptions<!-- /react-text --></code><!-- react-text: 343 --> <!-- /react-text --><code data-reactid="344"><!-- react-text: 345 -->minuteOptions<!-- /react-text --></code><!-- react-text: 346 --> <!-- /react-text --><code data-reactid="347"><!-- react-text: 348 -->secondOptions<!-- /react-text --></code><!-- react-text: 349 --> 属性已移除，可使用 <!-- /react-text --><code data-reactid="350"><!-- react-text: 351 -->disabledHours<!-- /react-text --></code><!-- react-text: 352 --> <!-- /react-text --><code data-reactid="353"><!-- react-text: 354 -->disabledMinutes<!-- /react-text --></code><!-- react-text: 355 --> <!-- /react-text --><code data-reactid="356"><!-- react-text: 357 -->disabledSeconds<!-- /react-text --></code><!-- react-text: 358 --> 配和 <!-- /react-text --><code data-reactid="359"><!-- react-text: 360 -->hideDisabled<!-- /react-text --></code><!-- react-text: 361 --> 属性来完成原有功能。<!-- /react-text --><a href="http://ant.design/components/time-picker/#picker-demo-disable-options" data-reactid="362"><!-- react-text: 363 -->演示<!-- /react-text --></a></p></li></ul><h2 id="0.9-=&gt;-0.10" data-reactid="364"><span data-reactid="365"><!-- react-text: 366 -->0.9 =&gt; 0.10<!-- /react-text --></span><a href="#0.9-=&gt;-0.10" class="anchor" data-reactid="367">#</a></h2><hr data-reactid="368"/><p data-reactid="369"><code data-reactid="370"><!-- react-text: 371 -->0.10.x<!-- /react-text --></code><!-- react-text: 372 --> 版本有大量改动，是一个不完全向下兼容的版本。以下文档尽力列出了 <!-- /react-text --><code data-reactid="373"><!-- react-text: 374 -->0.9.x<!-- /react-text --></code><!-- react-text: 375 --> 到 <!-- /react-text --><code data-reactid="376"><!-- react-text: 377 -->0.10.x<!-- /react-text --></code><!-- react-text: 378 --> 的不兼容变动，以帮助开发者升级。<!-- /react-text --></p><ul data-reactid="379"><li data-reactid="380"><p data-reactid="381"><code data-reactid="382"><!-- react-text: 383 -->0.10.x<!-- /react-text --></code><!-- react-text: 384 --> 文档：<!-- /react-text --><a href="http://010x.ant.design" data-reactid="385"><!-- react-text: 386 -->http://010x.ant.design<!-- /react-text --></a></p></li><li data-reactid="387"><p data-reactid="388"><code data-reactid="389"><!-- react-text: 390 -->0.9.x<!-- /react-text --></code><!-- react-text: 391 --> 文档：<!-- /react-text --><a href="http://09x.ant.design" data-reactid="392"><!-- react-text: 393 -->http://09x.ant.design<!-- /react-text --></a></p></li></ul><h3 id="升级-React" data-reactid="394"><span data-reactid="395"><!-- react-text: 396 -->升级 React<!-- /react-text --></span><a href="#升级-React" class="anchor" data-reactid="397">#</a></h3><p data-reactid="398"><!-- react-text: 399 -->新版本推荐使用 react@0.14.x 及以上版本，并增加了对低版本 react 的警告。建议进行同步升级，参考官方的<!-- /react-text --><a href="http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html" data-reactid="400"><!-- react-text: 401 -->升级文档<!-- /react-text --></a><!-- react-text: 402 -->。<!-- /react-text --></p><h3 id="组件化改造" data-reactid="403"><span data-reactid="404"><!-- react-text: 405 -->组件化改造<!-- /react-text --></span><a href="#组件化改造" class="anchor" data-reactid="406">#</a></h3><p data-reactid="407"><!-- react-text: 408 -->此版本对 <!-- /react-text --><a href="/components/button/" data-reactid="409">Button</a><!-- react-text: 410 -->、<!-- /react-text --><a href="/components/icon/" data-reactid="411">Iconfont</a><!-- react-text: 412 -->、<!-- /react-text --><a href="/components/layout/" data-reactid="413">Layout</a><!-- react-text: 414 -->、<!-- /react-text --><a href="/components/form/" data-reactid="415">Form</a><!-- react-text: 416 -->、<!-- /react-text --><a href="/components/form/#demo-input" data-reactid="417">Input</a><!-- react-text: 418 --> 模块进行了 React 组件化的改造，请基于新的使用方式修改，原有的书写方式理论上无影响。<!-- /react-text --></p><p data-reactid="419"><!-- react-text: 420 -->例如：<!-- /react-text --></p><pre class="language-html" data-reactid="421"><code data-reactid="422"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-btn ant-btn-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>按 钮<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
==>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>按钮<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Button</span><span class="token punctuation" >></span></span></code></pre><pre class="language-html" data-reactid="423"><code data-reactid="424"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>anticon anticon-appstore<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
==>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>appstore<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span></code></pre><h3 id="size-属性统一" data-reactid="425"><span data-reactid="426"><!-- react-text: 427 -->size 属性统一<!-- /react-text --></span><a href="#size-属性统一" class="anchor" data-reactid="428">#</a></h3><p data-reactid="429"><!-- react-text: 430 -->原有组件的 <!-- /react-text --><code data-reactid="431"><!-- react-text: 432 -->size<!-- /react-text --></code><!-- react-text: 433 --> 属性统一为大中小：<!-- /react-text --><code data-reactid="434"><!-- react-text: 435 -->large<!-- /react-text --></code><!-- react-text: 436 --> <!-- /react-text --><code data-reactid="437"><!-- react-text: 438 -->default<!-- /react-text --></code><!-- react-text: 439 --> <!-- /react-text --><code data-reactid="440"><!-- react-text: 441 -->small<!-- /react-text --></code><!-- react-text: 442 -->，包括 <!-- /react-text --><code data-reactid="443"><!-- react-text: 444 -->Button<!-- /react-text --></code><!-- react-text: 445 --> <!-- /react-text --><code data-reactid="446"><!-- react-text: 447 -->Table<!-- /react-text --></code><!-- react-text: 448 --> <!-- /react-text --><code data-reactid="449"><!-- react-text: 450 -->Tabs<!-- /react-text --></code><!-- react-text: 451 --> <!-- /react-text --><code data-reactid="452"><!-- react-text: 453 -->Steps<!-- /react-text --></code><!-- react-text: 454 --> <!-- /react-text --><code data-reactid="455"><!-- react-text: 456 -->Select<!-- /react-text --></code><!-- react-text: 457 --> <!-- /react-text --><code data-reactid="458"><!-- react-text: 459 -->Pagination<!-- /react-text --></code><!-- react-text: 460 --> <!-- /react-text --><code data-reactid="461"><!-- react-text: 462 -->InputNumber<!-- /react-text --></code><!-- react-text: 463 --> <!-- /react-text --><code data-reactid="464"><!-- react-text: 465 -->Datepicker<!-- /react-text --></code><!-- react-text: 466 -->。<!-- /react-text --></p><p data-reactid="467"><!-- react-text: 468 -->例如：<!-- /react-text --></p><pre class="language-html" data-reactid="469"><code data-reactid="470"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Tabs</span> <span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>mini<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span> ... <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Tabs</span><span class="token punctuation" >></span></span>
==>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Tabs</span> <span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span> ... <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Tabs</span><span class="token punctuation" >></span></span></code></pre><p data-reactid="471"><!-- react-text: 472 -->详情可参考：<!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/415" data-reactid="473"><!-- react-text: 474 -->https://github.com/ant-design/ant-design/issues/415<!-- /react-text --></a></p><h3 id="其他" data-reactid="475"><span data-reactid="476"><!-- react-text: 477 -->其他<!-- /react-text --></span><a href="#其他" class="anchor" data-reactid="478">#</a></h3><ul data-reactid="479"><li data-reactid="480"><p data-reactid="481"><a href="http://09x.ant.design/components/enter-animation" data-reactid="482"><!-- react-text: 483 -->enter-animation<!-- /react-text --></a><!-- react-text: 484 --> 组件下线， 请使用 <!-- /react-text --><a href="/components/queue-anim" data-reactid="485">queue-anim</a><!-- react-text: 486 --> 来代替。<!-- /react-text --></p></li><li data-reactid="487"><p data-reactid="488"><!-- react-text: 489 -->Carousel 升级依赖，参考新的<!-- /react-text --><a href="/components/carousel/" data-reactid="490">新的 API 和使用方式</a><!-- react-text: 491 -->进行修改。<!-- /react-text --></p></li><li data-reactid="492"><p data-reactid="493"><code data-reactid="494"><!-- react-text: 495 -->antd.Notification()<!-- /react-text --></code><!-- react-text: 496 --> 修改为小写的 <!-- /react-text --><code data-reactid="497"><!-- react-text: 498 -->antd.notification()<!-- /react-text --></code><!-- react-text: 499 -->。<!-- /react-text --></p></li><li data-reactid="500"><p data-reactid="501"><!-- react-text: 502 -->Datepicker 的 <!-- /react-text --><code data-reactid="503"><!-- react-text: 504 -->onSelect<!-- /react-text --></code><!-- react-text: 505 --> 属性修改为 <!-- /react-text --><code data-reactid="506"><!-- react-text: 507 -->onChange<!-- /react-text --></code><!-- react-text: 508 --> 属性。<!-- /react-text --></p></li><li data-reactid="509"><p data-reactid="510"><!-- react-text: 511 -->Datepicker 的 <!-- /react-text --><code data-reactid="512"><!-- react-text: 513 -->calendarStyle<!-- /react-text --></code><!-- react-text: 514 --> 属性修改为 <!-- /react-text --><code data-reactid="515"><!-- react-text: 516 -->popupStyle<!-- /react-text --></code><!-- react-text: 517 --> 属性。<!-- /react-text --></p></li><li data-reactid="518"><p data-reactid="519"><!-- react-text: 520 -->Dropdown 的 <!-- /react-text --><code data-reactid="521"><!-- react-text: 522 -->onSelect<!-- /react-text --></code><!-- react-text: 523 --> 属性应修正为 <!-- /react-text --><code data-reactid="524"><!-- react-text: 525 -->onClick<!-- /react-text --></code><!-- react-text: 526 --> 属性，因为原有的 onSelect 只在变化时触发。<!-- /react-text --></p></li><li data-reactid="527"><p data-reactid="528"><!-- react-text: 529 -->Slider 的 <!-- /react-text --><code data-reactid="530"><!-- react-text: 531 -->withDots<!-- /react-text --></code><!-- react-text: 532 --> <!-- /react-text --><code data-reactid="533"><!-- react-text: 534 -->isIncluded<!-- /react-text --></code><!-- react-text: 535 --> 属性修改为 <!-- /react-text --><code data-reactid="536"><!-- react-text: 537 -->dots<!-- /react-text --></code><!-- react-text: 538 --> <!-- /react-text --><code data-reactid="539"><!-- react-text: 540 -->included<!-- /react-text --></code><!-- react-text: 541 -->。<!-- /react-text --></p></li><li data-reactid="542"><p data-reactid="543"><!-- react-text: 544 -->iconfont 的基线更新，可能导致原有图标的位置偏移。<!-- /react-text --></p></li></ul><p data-reactid="545"><!-- react-text: 546 -->新版本变化较大，以上升级指南可能有遗漏，全部改动可以参考 <!-- /react-text --><a href="/changelog" data-reactid="547">更新日志</a><!-- react-text: 548 -->。在升级过程中遇到问题，欢迎 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/new" data-reactid="549"><!-- react-text: 550 -->报告<!-- /react-text --></a><!-- react-text: 551 --> 给我们。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="552"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="553"><section class="prev-next-nav" data-reactid="554"><a class="prev-page" href="changelog" data-reactid="555">Change Log</a><a class="next-page" href="components/button/" data-reactid="556"><span data-reactid="557">Button</span><span class="chinese" data-reactid="558"></span></a></section></div></div></div><footer id="footer" data-reactid="559"><ul data-reactid="560"><li data-reactid="561"><h2 data-reactid="562">GitHub</h2><div data-reactid="563"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="564"><span data-reactid="565">Repository</span></a></div><div data-reactid="566"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="567">dva</a><!-- react-text: 568 --> - <!-- /react-text --><span data-reactid="569">Framework</span></div><div data-reactid="570"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="571">dva-cli</a><!-- react-text: 572 --> -<!-- /react-text --><span data-reactid="573">Scaffold</span></div><div data-reactid="574"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="575">ant-tool</a><!-- react-text: 576 --> - <!-- /react-text --><span data-reactid="577">Developer Tools</span></div></li><li data-reactid="578"><h2 data-reactid="579"><span data-reactid="580">Links</span></h2><div data-reactid="581"><a href="http://mobile.ant.design" data-reactid="582">Ant Design Mobile</a><span data-reactid="583"> - </span><span data-reactid="584">Mobile</span></div><div data-reactid="585"><a href="https://g2.alipay.com/" data-reactid="586">G2</a><span data-reactid="587"> - </span><span data-reactid="588">Data Visualization</span></div><div data-reactid="589"><a href="https://antv.alipay.com/" data-reactid="590">AntV</a><span data-reactid="591"> - </span><span data-reactid="592">Data Visualization Specification</span></div><div data-reactid="593"><a href="http://motion.ant.design" data-reactid="594">Ant Motion</a><span data-reactid="595"> - </span><span data-reactid="596">Motion</span></div><div data-reactid="597"><a href="http://library.ant.design/" data-reactid="598">AntD Library</a><span data-reactid="599"> - </span><span data-reactid="600">Axure library of Ant Design</span></div><div data-reactid="601"><a href="http://ux.ant.design" data-reactid="602">Ant UX</a><span data-reactid="603"> - </span><span data-reactid="604">Sitemap Template</span></div></li><li data-reactid="605"><h2 data-reactid="606"><span data-reactid="607">Community</span></h2><div data-reactid="608"><a rel="noopener noreferrer" href="/changelog" data-reactid="609"><span data-reactid="610">Change Log</span></a></div><div data-reactid="611"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="612"><span data-reactid="613">Feedback</span></a></div><div data-reactid="614"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="615"><span data-reactid="616">Chat Room</span></a></div><div data-reactid="617"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="618"><span data-reactid="619">Bug Report</span></a></div></li><li data-reactid="620"><div data-reactid="621"><!-- react-text: 622 -->©2016 <!-- /react-text --><span data-reactid="623">Created by Ant UED</span></div><div data-reactid="624"><!-- react-text: 625 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="626">BiSheng</a></div><div style="margin-top:10px;" data-reactid="627"><span data-reactid="628">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="629"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="630"><div class="ant-select-selection__rendered" data-reactid="631"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="632">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="633"><b data-reactid="634"></b></span></div></div></div></li></ul></footer></div>
</div>
<div class="ant-site-loading" id="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/>
<div id="loading-text">One Design Language</div>
</div>
<script>
(function () {
var content = document.getElementById('loading-text');
if (content) {
content.innerHTML = content.innerHTML.split('').map(function (letter, i) {
var className;
if (i > 0 && i < content.innerText.length - 1) {
className = 'yoyo-x-' + (i % 6);
}
if (letter.trim() === '') {
className += ' blank';
}
return '<span class="' + className + '">' + letter + '</span>';
}).join('');
}
})();
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink