开发指南
何时使用
修改组件类名前缀，AT 组件类名的默认前缀都是 'next-'，如 'next-btn'，你可能在以下两种情况下想改变这个默认前缀：
自定义组件品牌，如 'my-btn'，'my-select'
一个页面中同时引入两个主题，防止相同类名样式互相覆盖
实现多语言文案切换
开启 Pure Render 模式，提高性能，注意同时可能会带来副作用
局域网（专有云）下，非全量引入，使用包含Icon的组件，如Tag、Select等中的图标
基本使用
指定多语言文案
通过 <ConfigProvider locale={localeObj}> 传入语言包，以支持多语言。目前 AT 内置的 locale 库支持中英繁日四种语言，覆盖各组件的简单词汇，例如：确定、取消、展开、收起、下一页等， 简单词汇映射表可参考 https://unpkg.com/@txdfe/at/lib/locale/
(ConfigProvider 提供简单组件简单词汇国际化能力，由于日期时间的国际化较为特殊，例如中国的日历是从周一到周日，美国的日历是从周日到周六等，时间相关的组件如 DatePicker 等需要国际化，请查看相应组件文档。)
可通过两种方式设置多语言文案，两种方式接收的对象格式略有不同:
1.设置组件自身 locale 属性
{
key1: value1,
key2: value2,
}2.ConfigProvider 的 locale 属性 (推荐)
{
component1: {
key1: value1,
key2: value2,
},
component2: {
key1: value1,
key2: value2,
}
}优先级顺序为: 组件自身 locale > 最近 ConfigProvider 的 locale > 更远父级 ConfigProvider 的 locale
(注： 由于Dialog.show() Message.show() 等函数式方法的特殊性，他们的将默认读取页面上的 root context。当页面上有多个包含<ConfigProvider/> 的 ReactDOM.render()方法调用时，由第一个渲染的决定 root context)
import { ConfigProvider, DatePicker } from '@txdfe/at';
const localeDatePicker = {
placeholder: 'localeDatePicker placeholder',
};
const localeGlobal = {
DatePicker: {
placeholder: 'localeGlobal placeholder',
},
};
class App extends React.Component {
render() {
return (
<div>
<ConfigProvider locale={localeGlobal}>
<DatePicker /> should be 'localeGlobal placeholder'
</ConfigProvider>
<br />
<br />
<ConfigProvider locale={localeGlobal}>
<DatePicker locale={localeDatePicker} /> should be 'localeDatePicker placeholder'
</ConfigProvider>
</div>
);
}
}根据引入组件库方式的不同(CDN 直接引用、作为依赖引用)，使用语言包的方式略有差异，具体见如下代码：
import { ConfigProvider, DatePicker } from '@txdfe/at';
import enUS from '@txdfe/at/lib/locale/en-us';
// import zhCN from '@txdfe/at/lib/locale/zh-cn';
// import zhTW from '@txdfe/at/lib/locale/zh-tw';
// import jaJP from '@txdfe/at/lib/locale/ja-jp';
// 如果应用中直接引入的是 cdn 文件
// 需要按照下面的方式引入国际化文案文件
// const { ConfigProvider, DatePicker, locale } = window.AT;
// const enUS = locale['en-us'];
class App extends React.Component {
render() {
return (
<ConfigProvider locale={enUS}>
<DatePicker />
</ConfigProvider>
);
}
}如果内置的 locale 库不满足你的需求(比如想支持法语、德语、西班牙语)，你也可以参考 https://unpkg.com/@txdfe/at/lib/locale/ 来自定义语言包，按照如下格式传入给 locale 即可：
{
DatePicker: {
datePlaceholder: 'Select date',
monthPlaceholder: 'Select month',
yearPlaceholder: 'Select year',
rangeStartPlaceholder: 'Start date',
rangeEndPlaceholder: 'End date',
ok: 'OK',
clear: 'Clear',
},
Dialog: {
// ...
},
// ...
}修改组件类名前缀
为你的应用包裹 ConfigProvider，并设置相应的 prefix
entry.jsx
class App extends React.Component { render() { return ( <ConfigProvider prefix="my-"> <div> <Input /> <Button>Submit</Button> </div> </ConfigProvider> ); } }scss 入口文件中在引入主题 scss 文件前，设置相应的
$css-prefixentry.scss
$css-prefix: "my-"; @import "~@txdfe/at-theme/teambition/scss/index.scss";
开启 Pure Render
import { ConfigProvider, DatePicker } from '@txdfe/at';
class App extends React.Component {
render() {
return (
<ConfigProvider pure>
<DatePicker />
</ConfigProvider>
);
}
}局域网（专有云）下非全量引入
import Tag from '@txdfe/at/lib/tag';
class App extends React.Component {
render() {
return (
<ConfigProvider scriptUrl="iconScript">
<Tag>标签</Tag>
</ConfigProvider>
);
}
}如何让组件支持 ConfigProvider ？
import { ConfigProvider } from '@txdfe/at';
import locale from './locale';
const { config } = ConfigProvider;
class Component extends React.Component {
static propTypes = {
prefix: PropTypes.string,
locale: PropTypes.object,
pure: PropTypes.bool,
};
static defaultProps = {
prefix: 'next-',
locale: locale,
pure: false,
};
render() {
const { prefix, locale, pure } = this.props;
// ...
}
}
export default config(Component);