javascript React Native display视情况而定

esyap4oy  于 6个月前  发布在  Java
关注(0)|答案(3)|浏览(67)

在我的render方法中,我想显示两个View组件中的一个,这取决于我的props中的条件。例如:

render() {
  return(
    <View>
      <View>View A</View>
      <View>View B</View>
    </View>
  );
}

字符串
其中条件是this.props.myConditional。如果false,显示A,如果true,显示B.

8yparm6h

8yparm6h1#

其实很简单

render() {
  return <View>
    {this.props.myConditional ? <View>View B</View> : <View>View A</View>}
  </View>
}

字符串

mkshixfv

mkshixfv2#

如果你正在使用功能组件,最新的方法,那么它更容易,

return (
<View style={Condition ? Styles.A : Styles.B}>

</View>

)

字符串
const Styles = StyleSheet.create({ A:{ display:“none”},B:{ display:“flex”} })
剩下的你要看功能组件

q3qa4bjr

q3qa4bjr3#

根据条件有多种显示方式:
1.在线状况

{ (link) && 
  <Text>Read More</Text> 
 }

字符串
1.在线状况

{ (link) 
  ? <Text>Read More</Text> 
  : <Text>Thank you</Text> }


1.使用函数

const Displaylink = (props) => {

  const isLink = props.isLink;
  if (isLnk) {
   return <Text>Read More</Text>;
  }
  return <Text>Thank you</Text>;
}

相关问题