根據React Native中的條件渲染元素

Question

如何根據React Native中的條件渲染元素？

這是我嘗試的方式：

render() {  
  return (
      <Text>amount is: {this.state.amount}</Text> // it correctly prints amount value
      </Button>
         {this.state.amount} >= 85 ? <button>FIRST</button> :   <button>SECOND</button>
      <Text>some text</Text>
  );
}

但是會出現此錯誤消息：

Expected a component class, got [object Object]

Answer 1

你放錯了地方} ：

render() {  
  return (
      <Text>amount is: {this.state.amount}</Text>
      {this.state.amount >= 85 ? <button>FIRST</button> : <button>SECOND</button>}
      <Text>some text</Text>
  );
}

Answer 2

請記住，您必須將所有內容都包裝在視圖中。

render() {  
  return (
    <View>
      <Text>amount is: {this.state.amount}</Text>
         {this.state.amount >= 85 ? 
           <button>FIRST</button> : <button>SECOND</button> 
         }
      <Text>some text</Text>
    </View>
  );
}