react native注釋代碼的方法

小編給大家分享一下react native注釋代碼的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

react native注釋代碼的方法：1、HTML標簽節點內，使用“{/* */}”進行注釋；2、HTML標簽節點外，多行可以用“/**/”進行注釋，單行可以用“//”進行注釋。

React Native 注釋太講究，動不動就報錯，而且很不智能。這里對注釋總結一下。

問題呈現

代碼如下：

        //標題欄
        ① <View style = {styles.container}>
            ②<View style = {styles.headerView}><Text style = {styles.textHeaderStyle}>Header</Text>
            </View>
          //Tab欄
          <ScrollableTabView
              style={styles.pagerView}
              renderTabBar={() => <DefaultTabBar />}//默認樣式，Tab欄不可滑動
              tabBarUnderlineStyle={styles.lineStyle}//下劃線
              tabBarActiveTextColor='#FF0000'>         

          <MyFlatList  //列表項
            tabLabel = {dataSource1.tab}
            dataSource = {dataSource1}
            renderItem = {({item}) =>
            <TouchableNativeFeedback    //點擊事件
                onPress = {this.onPress.bind(this,item)}>
                <Text style = {styles.textMainStyle}>{item.key}</Text>
            </TouchableNativeFeedback>
          }
          />

沒加注釋之前運行是正常的，加了注釋之后，就報出各種錯誤。
很是奇怪，經排查發現：

>后使用 // 作為注釋要注意，注釋內容必須不在任何 html 標簽里，否則會當成要顯示的文本內容

例如上面的 //Tab欄 雖然在②的外，但是仍在①的內，會被當做要顯示的文本，從而報錯。這時候注釋要用 {/* 一般注釋, 用 {} 包圍 */}

react native 里是用 JSX 語言，JS 和 html結合，所有注釋方式如下：

var content = (
  <Nav>
    {/* 一般注釋, 用 {} 包圍 */}
    <Person
      /* 多
         行
         注釋 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注釋
    />
  </Nav>
);

JSX 里添加注釋很容易它們只是 JS 表達式而已。你只需要在一個標簽的子節點內(非最外層)用 {} 包圍要注釋的部分。

class ReactDemo extends Component {
  render() {
    return (      <View style={styles.container}>
        {/*標簽子節點的注釋*/}
        <Text style={styles.welcome}
          //textAlign='right'
          textShadowColor='yellow'
          /*color='red'
          textShadowRadius='1'*/
          >
          React Native!        </Text>
      </View>
    );
  }
}

在標簽節點以外注釋和通常的注釋是一樣的，多行用“/**/”，單行用“//”。

注：

使用 // 作為注釋要注意，注釋內容必須不在任何 html 標簽里，否則會當成要顯示的文本內容

注釋一般用 {/* */}，如果不在任何標簽內，可以用 //， } 后注釋用 //

看完了這篇文章，相信你對react native注釋代碼的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！