Учебник по настройке
Это краткая инструкция по настройке tsx-control-statements, фантастического пакета от Константина Симеонова.
Я предпочитаю операторы управления TSX вместо renderX или встроенного потока управления, потому что считаю их более декларативными и, следовательно, более легкими для чтения. Например:
const List = ({ children }: any) => <div>{children}</div>;
const Item = ({ children }: any) => <p>{children}</p>;
const items = [
{ id: 1, name: 'Alex' },
{ id: 2, name: 'Dave' },
{ id: 3, name: 'Tom' },
];
const Example = () => (
<List>
{items &&
items.map((item, i) => (
<Item key={item.id}>
{i}: {item.name}
</Item>
))}
</List>
);
Можно заменить на:
const Example2 = () => (
<List>
<If condition={!!items}>
<For
of={items}
body={(item, i) => (
<Item key={item.id}>
{i}: {item.name}
</Item>
)}
/>
</If>
</List>
);
Короче говоря, операторы управления TSX позволяют мне указать, как я хотел бы, чтобы мои данные отображались, и он позаботится о реализации за меня.
Я нашел документацию по настройке с помощью Webpack и ts-loader немного неясной и непоследовательной, поэтому вот руководство для идиотов по его настройке.
Установить
yarn add -ED tsx-control-statements
-E относится к точной версии, чтобы избежать серьезных изменений в будущем.
-D, как вы все знаете, относится к devDependencies.
Конфигурация веб-пакета
Сначала потребуйте statements в свой файл webpack.config.js:
const statements = require('tsx-control-statements').default
Затем под ts-loader добавьте следующий объект options:
options: {
getCustomTransformers: () => ({
before: [statements()],
}),
},
Все ваше правило .tsx? должно выглядеть так (используйте loader, если у вас есть один загрузчик, и use, когда у вас несколько/массив загрузчиков):
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({
before: [statements()],
}),
},
exclude: /node_modules/,
}
]
Теперь вы готовы использовать пакет в своем проекте React, например:
import { If } from 'tsx-control-statements/components';
const Loading = (loading: boolean) => (
<p>
<If condition={loading}>
Loading!!!
</If>
<If condition={!loading}>
Not Loading!!!
</If>
</p>
)
Надеюсь, это помогло.
