javascript - 我正在尝试向我的 React Native 应用程序添加字体，但出现未关闭 jsx 标签的错误，但我关闭了所有标签

Question

我试图向我的应用程序添加字体，但一路上我遇到了这个错误

SyntaxError: C:\Users\arich\Documents\efees\App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (69:5)

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

    async componentDidMount() {
      await Font.loadAsync({
        'open-sans': require('./assets/fonts/OpenSans-Bold.ttf')
      }).then(() => {
        this.setState({ fontLoaded: true });
      });
    }

  render() {
    const finalValue = parseFloat(this.state.soldPrice || 0) +
    parseFloat(this.state.shippingCharge || 0)
    - parseFloat(this.state.soldPrice || 0) *
    parseFloat(this.state.paypalFeePercentage || 0)
    - parseFloat(this.state.paypalFee  || 0)
    - parseFloat(this.state.soldPrice || 0) *
    parseFloat(this.state.ebayFee || 0) - parseFloat(this.state.shippingCost || 0)
    - parseFloat(this.state.itemCost || 0);

    const inputStyle = this.state.inputStyleInactive;

    const ebaytTotal = this.state.ebayFee * this.state.soldPrice;

    const paypalTotal = this.state.paypalFeePercentage *
     this.state.soldPrice + this.state.paypalFee;

      EStyleSheet.build({ // always call EStyleSheet.build() even if you don't use global variables!

      });
   return (

     <View style={styles.container}>

我尝试添加/删除开始和结束标签，但我认为此错误的主要原因是这个左括号，但只是不确定如何修复它，也希望解释为什么会导致此错误，这肯定会对我有帮助对于 future ，我是一个初学者，总是希望从这些被难住的时刻中吸取教训

 {this.state.fontLoaded == true ? (
         <View style={styles.header}>
         <Text style={styles.headerText}>Efees</Text>
         </View>

此 View 是出现错误的 View

    <View style={styles.blocks}>

     <View style={styles.inputs} >
     <Text style={styles.inputText}>1. Sold Price</Text>
     <NumberInput
     onchange={(soldPrice) => this.setState({ soldPrice })}
     />
     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>2. Shipping Charge</Text>

     <NumberInput
     onchange={(shippingCharge) => this.setState({ shippingCharge })}
     />
     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>3. Shipping Cost</Text>

     <NumberInput
     onchange={(shippingCost) => this.setState({ shippingCost })}
     />

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>4. Item Cost</Text>

     <NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>5. Ebay Store?</Text>

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>6. Top Rated Seller?</Text>


     </View>
     </View>

     <View style={styles.results}>
      <Text style={styles.resultText}>eBay Fee:{ebaytTotal.toFixed(2)}</Text>
      <Text style={styles.resultText}>Paypal Fee:{paypalTotal.toFixed(2)}</Text>
      <Text style={styles.resultText}>Profit %{}</Text>
      <Text style={styles.profitResult}>TOTAL PROFIT:{finalValue.toFixed(2)}</Text>
      </View>
    ) : (<Text style={styles.inputText}>Loading... </Text>)
  }
      </View>

 );
 }
}

Answer 1

错误是因为您从条件中返回多个元素，

{this.state.fontLoaded == true ? ( ...

您需要使用包装器元素包装所有元素，以仅创建 1 个返回元素。

为此，您可以使用 Fragments .

什么是片段？

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

这里你也有多种写法 Fragment .

import React from 'react'

{this.state.fontLoaded == true ? (
  <React.Fragment>
     <view></view>
     ...
     ...
  </React.Fragment>
 ) : (<Text style={styles.inputText}>Loading... </Text>)
}

或者

import React , { Fragment } from 'react'

{this.state.fontLoaded == true ? (
  <Fragment>
     <view></view>
     ...
     ...
  </Fragment>
 ) : (<Text style={styles.inputText}>Loading... </Text>)
}

或者，即使是简短的语法也是 <> </> (空标签)，

import React from 'react'

{this.state.fontLoaded == true ? (
  <>
     <view></view>
     ...
     ...
  </>
 ) : (<Text style={styles.inputText}>Loading... </Text>)
}