네이티브 반응이 구성 요소 상태에서 부울 값을 사용할 수 없습니다.

Question

간단한 네이티브를 사용하여 네이티브 반응을 배우고 있습니다. 이상한 점을 발견했습니다. 나는 constructor() 상태를 설정 사용하지만 render()에 액세스 할 수 없습니다

export default class App extends Component { 

    constructor(props) { 
    super(props) 
    this.state = {success: false} 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     <Text style={styles.instructions}> 
      To get started, edit App.js. 
      {this.state.success}  //this line can not be shown 
     </Text> 
     <Text style={styles.instructions}> 
      {instructions} 
     </Text> 
     </View> 
    ); 
    } 
} 

, 내가 문자열 또는 INT에 success 값을 설정하면 표시됩니다

이 내 코드입니다.

내 코드에 문제가 있습니까? 왜 부울을 사용할 수 없습니까?

Answer 1

아무 문제가 없지만 문자열이나 숫자가 아니기 때문에 아무 것도 표시되지 않습니다.

는 "거짓"리터럴 "true"또는 표시 할 경우 toString() 먼저 문자열로 변환해야합니다 :

---

만약 내가 올바르게 기억

<Text style={styles.instructions}> 
    To get started, edit App.js. 
    {this.state.success.toString()} 
</Text> 

, 나는 그들이하지 않기로 결정 읽었 더 유연한 인라인 조건을 지원하기 위해 부울 값을 렌더링합니다. success 해당하는

{!this.state.success && <p>Whoops, something went wrong!</p>} 

경우, 메시지가 상기 렌더링되지 않는다 :

단락 평가 한 예이다. 그러나 바닐라 JS에서는 문자열 리터럴 "false"를 반환합니다. 예제 에서처럼 을 무언가 또는 전혀 나타내지 않으려면을 렌더링 할 때 이상적이지 않습니다.

일부 개체 메서드의 반환 값을 렌더링하는 경우는 것이 얼마나 짜증나는 상상

(즉 indexOf(), map() 등) 및 정의되지 않은, 널 및 기타 falsy 값을 리터럴 문자열을 렌더링 반응. 이것은 일어나지 않습니다. 대신 React는 아무 것도 렌더링하지 않습니다.

공식 문서 here에서 일부 추가 정보를 원하시면 :

false, null, undefined 및 true이 유효 자녀입니다. 그들은 단순히 렌더링하지 않습니다. 이러한 JSX 표현식은 모두 같은 것으로 렌더링됩니다.