首頁猿問解析錯誤：相鄰的JSX元素必須包裝...

解析錯誤：相鄰的JSX元素必須包裝在一個封閉的標(biāo)記中

JavaScript

尚方寶劍之說 2019-08-24 18:12:41

解析錯誤：相鄰的JSX元素必須包裝在一個封閉的標(biāo)記中我正在嘗試設(shè)置我的React.js應(yīng)用程序，以便只有在我設(shè)置的變量為true時才會呈現(xiàn)。我的渲染功能的設(shè)置方式如下：render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; return ( <div>if(this.state.submitted==false) { <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} /> <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}> <div className="button-row"> <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a> </div> </ReactCSSTransitionGroup>} </div> ) },基本上，這里的重要部分是if（this.state.submitted == false）部分（我希望在提交的變量設(shè)置為false時顯示這些div）。但是在運(yùn)行時，我在問題中得到了錯誤：未捕獲的錯誤：解析錯誤：第38行：相鄰的JSX元素必須包裝在一個封閉的標(biāo)記中這是什么問題？我可以用什么來完成這項工作？

查看完整描述

3 回答

慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗獲得超5個贊

如果您不想像其他答案所建議的那樣將其包裝在另一個div中，您也可以將其包裝在一個數(shù)組中，它將起作用。

// Wrong!return (  
   <Comp1 />
   <Comp2 />)

它可以寫成：

// Correct!return (  
    [<Comp1 />,
    <Comp2 />])

請注意，以上內(nèi)容會產(chǎn)生警告： Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

這可以通過向key組件添加屬性來修復(fù)，如果手動添加這些屬性，則添加如下：

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />])

以下是有關(guān)鍵的更多信息：組合與繼承

反對回復(fù) 2019-08-24

守候你守候我

TA貢獻(xiàn)1802條經(jīng)驗獲得超10個贊

對于Rect-Native開發(fā)人員。我在FlatList中的renderingItem時遇到此錯誤。我有兩個Text組件。我在下面使用它們

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>}

但在我把這些拖曳內(nèi)部視圖組件后，它對我有用。

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

您可能正在使用其他組件，但將它們放入View可能適合您。

反對回復(fù) 2019-08-24

飲歌長嘯

TA貢獻(xiàn)1951條經(jīng)驗獲得超3個贊

很簡單，我們可以使用父元素div來包裝所有元素，或者我們可以使用高階組件（HOC）的概念，即對于反應(yīng)js應(yīng)用程序非常有用

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );}

或者另一種最好的方法是HOC非常簡單而不是很復(fù)雜只需在項目中添加一個文件hoc.js并簡單地添加這些代碼

const aux = (props) => props.children;export default aux;

現(xiàn)在import hoc.js文件在你想要使用的地方，現(xiàn)在不是用div元素包裝，而是我們可以用hoc包裝。

import React, { Component } from 'react';import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

反對回復(fù) 2019-08-24