在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符
Conditional Operator
condition ? expr_if_true : expr_if_false
在jsx
中书写条件语句我们经常都会使用到的就是三目运算符(?:)也叫内联条件运算符,可能大家都有体会三目运算符并不是一种直观的书写方式。特别是在复杂情况下时。
拿上面文章中的代码举个?
return (
<div>
<p>Text: {this.state.text}</p>
{
view
? null
: (
<p>
<input
onChange={this.handleChange}
value={this.state.inputText} />
</p>
)
}
</div>
);
复制代码
上面的代码是根据view
变量为false
时显示一个p元素
或者是下面这样显示不同的元素或组件
return (
<div>
<p>Text: {this.state.text}</p>
{
view
? (
<p>
something value
</p>
) : (
<p>
<input
onChange={this.handleChange}
value={this.state.inputText} />
</p>
)
}
</div>
);
复制代码
过多的javascript三目运算符在jsx中看起来并不那么容易,逻辑区分有时也会变的复杂
如果你又一些嵌套,情况会更复杂(大部分eslint并不能使用嵌套)?
return (
<div>
{ condition1
? <Component1 />
: ( condition2
? <Component2 />
: ( condition3
? <Component3 />
: <Component 4 />
)
)
}
</div>
);
复制代码
上面的代码我也遇到过,维护起来就像在沼泽里行走
我尝试着思考,能否将这种条件运算符进行更高级别的抽象?,然后使用React组件实现它们呢?
经过尝试确实是可行的,于是我做了一些东西。抽象后jsx
条件运算就像下面这样
根据某个变量的值显示某个组件
<If when={this.state.logic}>
<p>↔️show component</p>
</If>
复制代码
同上,但是具有更高的可读性,而且逻辑和美观程度上优越于三目运算符
<If when={this.state.logic}>
<p>↔️show component</p>
<If when={this.state.logic}>
<p>other component</p>
</If>
</If>
复制代码
还有更多的选择,我应该不用做过多解释就能看明白下面的代码了
<Switch value={value}>
<Case when={condition}>
<p>condition 1</p>
</Case>
<Case when={condition}>
<p>condition 2</p>
</Case>
<Case when='c' children={<p>condition 3</p>}/>
<Default children={<p>default component</p>}/> {/*可提供一个默认组件*/}
</Switch>
复制代码
遍历一个array
或object
<For of={['a', 'b', 'c']}>
{(item, index) => (<p key={index}>{index}:{item}</p>)}
<Default>default component</Default> {/*可提供一个默认组件*/}
</For>
复制代码
我创建这个仓库供大家尝试
你又任何想法?欢迎讨论。
感谢阅读 ?