Skip to content

Commit d04afdc

Browse files
committed
update readme
1 parent 4863338 commit d04afdc

File tree

2 files changed

+46
-46
lines changed

2 files changed

+46
-46
lines changed

README.ZH-CN.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
## <span id="toc-usage">开始使用</span>
3131

32-
需要 **node v8.6.0** 或者更高版本,**babel v6.20.0** 或者更高版本
32+
需要 **node v10.0.0** 或者更高版本,**babel v6.20.0** 或者更高版本
3333

3434
### <span id="toc-installation">安装</span>
3535
使用 npm:
@@ -94,10 +94,10 @@ const foo = true ? <div>text</div> : null
9494
```jsx harmony
9595
const foo = (
9696
<div>
97-
<p x-if={data === 'a'}>A</p>
98-
<p x-else-if={data === 'b'}>B</p>
99-
<p x-else-if={data === 'c'}>C</p>
100-
<p x-else>D</p>
97+
<p x-if={data === 'a'}>A</p>
98+
<p x-else-if={data === 'b'}>B</p>
99+
<p x-else-if={data === 'c'}>C</p>
100+
<p x-else>D</p>
101101
</div>
102102
)
103103
```
@@ -106,12 +106,12 @@ const foo = (
106106
```jsx harmony
107107
const foo = (
108108
<div>
109-
{data === 'a'
110-
? <p>A</p>
111-
: data === 'b'
112-
? <p>B</p>
113-
: data === 'c'
114-
? <p>C</p>
109+
{data === 'a'
110+
? <p>A</p>
111+
: data === 'b'
112+
? <p>B</p>
113+
: data === 'c'
114+
? <p>C</p>
115115
: <p>D</p>
116116
}
117117
</div>
@@ -140,9 +140,9 @@ const foo = (
140140
当然,它也会通过调用 [mergeProps 方法](./runtime/merge-props.js) 合并其他 `style` props,例如:
141141
```jsx harmony
142142
const foo = (
143-
<div
143+
<div
144144
style={{ color: 'red' }}
145-
x-show={true}
145+
x-show={true}
146146
{...extraProps}>
147147
text
148148
</div>
@@ -179,7 +179,7 @@ const foo = (
179179
```jsx harmony
180180
const foo = (
181181
<ul>
182-
<li
182+
<li
183183
x-for={item in list}
184184
key={item.id}>{item.name}
185185
</li>
@@ -216,8 +216,8 @@ const foo = (
216216
const foo = (
217217
<ul>
218218
{list.map(item => (
219-
item.name === 'alice'
220-
? <li key={item.id}>{item.name}</li>
219+
item.name === 'alice'
220+
? <li key={item.id}>{item.name}</li>
221221
: null
222222
))}
223223
</ul>
@@ -235,7 +235,7 @@ class Foo extends React.Component {
235235
super(props);
236236
this.state = { data: 'text' }
237237
}
238-
238+
239239
render() {
240240
return <input x-model={this.state.data}/>
241241
}
@@ -271,19 +271,19 @@ class Foo extends React.Component {
271271
super(props);
272272
this.state = { data: 'text' }
273273
}
274-
274+
275275
onChange(e) {
276276
console.log(e.target.value);
277277
}
278-
278+
279279
render() {
280280
return (
281281
<input
282282
onChange={this.onChange.bind(this)}
283283
x-model={this.state.data}
284284
{...this.props}
285285
/>
286-
)
286+
)
287287
}
288288
}
289289
```
@@ -374,7 +374,7 @@ class Foo extends React.Component {
374374
```
375375

376376
### <span id="toc-directives-x-model-hook">x-model-hook</span>
377-
`x-model-hook``x-model` 非常相似,区别在于 `x-model-hook` 用于使用了 *useState hook* 的函数组件,而 `x-model` 用于 *class component*
377+
`x-model-hook``x-model` 非常相似,区别在于 `x-model-hook` 用于使用了 *useState hook* 的函数组件,而 `x-model` 用于 *class component*
378378

379379
**例子:**
380380
```jsx harmony
@@ -438,9 +438,9 @@ const foo = <div className={classNames(["xyz", { abc: true, def: false }])}>
438438
import styles from './style.css';
439439

440440
const foo = (
441-
<div
441+
<div
442442
className={styles.foo}
443-
x-class={{
443+
x-class={{
444444
[styles.bar]: true,
445445
[styles.qux]: false
446446
}}

README.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ A babel plugin that provides some directives for react(any JSX), similar to dire
2929

3030
## <span id="toc-usage">Usage</span>
3131

32-
Requires **node v8.6.0** or higher, **babel v6.20.0** or higher.
32+
Requires **node v10.0.0** or higher, **babel v6.20.0** or higher.
3333

3434
### <span id="toc-installation">Installation</span>
3535
use npm:
@@ -86,18 +86,18 @@ const foo = true ? <div>text</div> : null
8686
```
8787

8888
### <span id="toc-directives-x-else-if-and-x-else">x-else-if and x-else</span>
89-
The `x-else-if` must have a corresponding `x-if`. if `x-if` value is **falsy**, and `x-else-if` value is **truthy**, it will be rendered.
89+
The `x-else-if` must have a corresponding `x-if`. if `x-if` value is **falsy**, and `x-else-if` value is **truthy**, it will be rendered.
9090

9191
The `x-else` must have the corresponding `x-if` or `x-if-else`. When all corresponding `x-if` or `x-else-if` value are **falsy**, it will be rendered.
9292

9393
**Example:**
9494
```jsx harmony
9595
const foo = (
9696
<div>
97-
<p x-if={data === 'a'}>A</p>
98-
<p x-else-if={data === 'b'}>B</p>
99-
<p x-else-if={data === 'c'}>C</p>
100-
<p x-else>D</p>
97+
<p x-if={data === 'a'}>A</p>
98+
<p x-else-if={data === 'b'}>B</p>
99+
<p x-else-if={data === 'c'}>C</p>
100+
<p x-else>D</p>
101101
</div>
102102
)
103103
```
@@ -106,12 +106,12 @@ const foo = (
106106
```jsx harmony
107107
const foo = (
108108
<div>
109-
{data === 'a'
110-
? <p>A</p>
111-
: data === 'b'
112-
? <p>B</p>
113-
: data === 'c'
114-
? <p>C</p>
109+
{data === 'a'
110+
? <p>A</p>
111+
: data === 'b'
112+
? <p>B</p>
113+
: data === 'c'
114+
? <p>C</p>
115115
: <p>D</p>
116116
}
117117
</div>
@@ -140,9 +140,9 @@ const foo = (
140140
Of course, it will also merge other `style` props by calling the [mergeProps method](./runtime/merge-props.js), for example:
141141
```jsx harmony
142142
const foo = (
143-
<div
143+
<div
144144
style={{ color: 'red' }}
145-
x-show={true}
145+
x-show={true}
146146
{...extraProps}>
147147
text
148148
</div>
@@ -181,7 +181,7 @@ Please install [**eslint-plugin-react-directives**](https://github.com/peakchen9
181181
```jsx harmony
182182
const foo = (
183183
<ul>
184-
<li
184+
<li
185185
x-for={item in list}
186186
key={item.id}>{item.name}
187187
</li>
@@ -218,8 +218,8 @@ will be converted to:
218218
const foo = (
219219
<ul>
220220
{list.map(item => (
221-
item.name === 'alice'
222-
? <li key={item.id}>{item.name}</li>
221+
item.name === 'alice'
222+
? <li key={item.id}>{item.name}</li>
223223
: null
224224
))}
225225
</ul>
@@ -237,7 +237,7 @@ class Foo extends React.Component {
237237
super(props);
238238
this.state = { data: 'text' }
239239
}
240-
240+
241241
render() {
242242
return <input x-model={this.state.data}/>
243243
}
@@ -273,19 +273,19 @@ class Foo extends React.Component {
273273
super(props);
274274
this.state = { data: 'text' }
275275
}
276-
276+
277277
onChange(e) {
278278
console.log(e.target.value);
279279
}
280-
280+
281281
render() {
282282
return (
283283
<input
284284
onChange={this.onChange.bind(this)}
285285
x-model={this.state.data}
286286
{...this.props}
287287
/>
288-
)
288+
)
289289
}
290290
}
291291
```
@@ -441,9 +441,9 @@ The `x-class` can also be used with [css-modules](https://github.com/css-modules
441441
import styles from './style.css';
442442

443443
const foo = (
444-
<div
444+
<div
445445
className={styles.foo}
446-
x-class={{
446+
x-class={{
447447
[styles.bar]: true,
448448
[styles.qux]: false
449449
}}

0 commit comments

Comments
 (0)