In this article, I've learned something but I'm also thinking about something.
Conditional Operator
Inline Conditional Operator is confusing example:
condition ? expr_if_true : expr_if_false
return ( <div> <p>Text: {this.state.text}</p> { view ? null : ( <p> <input onChange={this.handleChange} value={this.state.inputText} /> </p> ) } </div> ); Or display a component based on its variable value
{ view ? null : ( <p> <input onChange={this.handleChange} value={this.state.inputText} /> </p> ) } If you have nested code 😰
return ( <div> { condition1 ? <Component1 /> : ( condition2 ? <Component2 /> : ( condition3 ? <Component3 /> : <Component 4 /> ) ) } </div> ); I wonder if I can abstract this statement as a react component?
Like this
<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> I think it's more beautiful and readable
There is a lot more
<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> Determines multiple conditions and can display default components
Iterate through the traversal array or object
<For of={['a', 'b', 'c']}> {(item, index) => (<p key={index}>{index}：{item}</p>)} <Default>default component</Default> </For> I created a repo for this
Do you have any ideas?
😮
Top comments (2)
Reminds me of AngularJS. :D
vue 😁