首頁(yè) 猿問(wèn) 解析錯(cuò)誤：相鄰的JSX元素必須包裝...

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

JavaScript

尚方寶劍之說(shuō) 2019-08-24 18:12:41

解析錯(cuò)誤：相鄰的JSX元素必須包裝在一個(gè)封閉的標(biāo)記中我正在嘗試設(shè)置我的React.js應(yīng)用程序，以便只有在我設(shè)置的變量為true時(shí)才會(huì)呈現(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時(shí)顯示這些div）。但是在運(yùn)行時(shí)，我在問(wèn)題中得到了錯(cuò)誤：未捕獲的錯(cuò)誤：解析錯(cuò)誤：第38行：相鄰的JSX元素必須包裝在一個(gè)封閉的標(biāo)記中這是什么問(wèn)題？我可以用什么來(lái)完成這項(xiàng)工作？

查看完整描述

3 回答

慕運(yùn)維8079593

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

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

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

它可以寫成：

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

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

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

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

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

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

守候你守候我

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

對(duì)于Rect-Native開(kāi)發(fā)人員。我在FlatList中的renderingItem時(shí)遇到此錯(cuò)誤。我有兩個(gè)Text組件。我在下面使用它們

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

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

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

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

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

飲歌長(zhǎng)嘯

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

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

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

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

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>
      );
    }

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