html/react/react native的样式设置区别

最新推荐文章于 2020-08-21 14:33:07 发布

xiaoniuxqq

最新推荐文章于 2020-08-21 14:33:07 发布

阅读量263

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011649691/article/details/84948266

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

html:

<p class="class1 class2">xxx</p>

react:

render(){
  return <p className={ this.state.isError && 'box-color' }>hello world</p>
}
三目运算符
render(){
  return <p className={ this.state.isShow ? 'box-show' : 'box-hide' }>hello world</p>
}
使用函数：
render(){
  return <p className={ this.getIsError() }>hello world</p>
}
多个class：
render(){
  return <div className={classnames.join(" ")}>{value.value}</div>
}

react-native:

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>