Ik probeer mijn React.js-app zo in te stellen dat deze alleen wordt weergegeven als een variabele die ik heb ingesteld trueis.
De manier waarop mijn renderfunctie is ingesteld, ziet er als volgt uit:
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>
)
},
Kortom, het belangrijkste gedeelte hier is het if(this.state.submitted==false)gedeelte (ik wil dat deze divelementen verschijnen wanneer de ingediende variabele is ingesteld op false).
Maar wanneer ik dit uitvoer, krijg ik de fout in de vraag:
Uncaught Error: Parse Error: Line 38: Aangrenzende JSX-elementen moeten worden ingepakt in een omsluitende tag
Wat is hier het probleem? En wat kan ik gebruiken om dit te laten werken?
Antwoord 1, autoriteit 100%
U moet uw component tussen een omsluitende tag plaatsen, wat betekent:
// WRONG!
return (
<Comp1 />
<Comp2 />
)
In plaats daarvan:
// Correct
return (
<div>
<Comp1 />
<Comp2 />
</div>
)
Bewerken:de opmerking van Joe Clay over de Fragments API
// More Correct
return (
<React.Fragment>
<Comp1 />
<Comp2 />
</React.Fragment>
)
// Short syntax
return (
<>
<Comp1 />
<Comp2 />
</>
)
Antwoord 2, autoriteit 37%
Het is laat om deze vraag te beantwoorden, maar ik dacht dat het zou bijdragen aan de uitleg.
Het gebeurt omdat je overal in je code twee elementen tegelijk retourneert.
bijv.
return(
<div id="div1"></div>
<div id="div1"></div>
)
Het moet worden ingepakt in een ouderelement. bijv.
return(
<div id="parent">
<div id="div1"></div>
<div id="div1"></div>
</div>
)
**Meer gedetailleerde uitleg**
Uw onderstaande jsx-code wordt getransformeerd
class App extends React.Component {
render(){
return (
<div>
<h1>Welcome to React</h1>
</div>
);
}
}
hierin
_createClass(App, [{
key: 'render',
value: function render() {
return React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Welcome to React'
)
);
}
}]);
Maar als je dit doet
class App extends React.Component {
render(){
return (
<h1>Welcome to React</h1>
<div>Hi</div>
);
}
}
dit wordt omgezet in dit(Alleen ter illustratie, je krijgt in feite error : Adjacent JSX elements must be wrapped in an enclosing tag)
_createClass(App, [{
key: 'render',
value: function render() {
return React.createElement(
'div',
null,
'Hi'
);
return React.createElement(
'h1',
null,
'Welcome to React'
)
}
}]);
In de bovenstaande code kun je zien dat je tweemaalprobeert te retourneren vanuit een methodeaanroep, wat duidelijk verkeerd is.
Bewerken- Laatste wijzigingen in React 16 en own-wards:
Als je geen extra div wilt toevoegen en meer dan één onderliggende component wilt retourneren, kun je React.Fragmentsgebruiken.
React.Fragments(<React.Fragments>) zijn iets sneller en hebben minder geheugengebruik (u hoeft geen extra DOM-knooppunt te maken, minder rommelige DOM boom).
bijv. (In React 16.2.0)
render() {
return (
<>
React fragments.
<h2>A heading</h2>
More React fragments.
<h2>Another heading</h2>
Even more React fragments.
</>
);
}
of
render() {
return (
<React.Fragments>
React fragments.
<h2>A heading</h2>
More React fragments.
<h2>Another heading</h2>
Even more React fragments.
</React.Fragments>
);
}
of
render() {
return [
"Some text.",
<h2 key="heading-1">A heading</h2>,
"More text.",
<h2 key="heading-2">Another heading</h2>,
"Even more text."
];
}
Antwoord 3, autoriteit 16%
React element hoeft maar één element te retourneren. Je moet beide tags omwikkelen met een andere elementtag.
Ik zie ook dat je renderfunctie niets teruggeeft. Zo zou uw component eruit moeten zien:
var app = React.createClass({
render () {
/*React element can only return one element*/
return (
<div></div>
)
}
})
Houd er rekening mee dat u geen if-instructies kunt gebruiken binnen een geretourneerd element:
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)"} : {};
if(this.state.submitted==false) {
return <YourJSX />
} else {
return <YourOtherJSX />
}
},
Antwoord 4, autoriteit 14%
Als je het niet in een andere div wilt stoppen, zoals andere antwoorden hebben gesuggereerd, kun je het ook in een array plaatsen en het zal werken.
// Wrong!
return (
<Comp1 />
<Comp2 />
)
Het kan worden geschreven als:
// Correct!
return (
[<Comp1 />,
<Comp2 />]
)
Houd er rekening mee dat het bovenstaande een waarschuwing zal genereren: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.
Dit kan worden opgelost door een key-attribuut toe te voegen aan de componenten, als deze handmatig worden toegevoegd, voeg het dan toe als:
return (
[<Comp1 key="0" />,
<Comp2 key="1" />]
)
Hier is wat meer informatie over sleutels:Composition vs Inheritance
Antwoord 5, autoriteit 7%
Het probleem
Parseerfout: aangrenzende JSX-elementen moeten worden ingepakt in een omsluitende tag
Dit betekent dat u op een onjuiste manier meerdere JSX-elementen probeert te retourneren. Onthoud dat u geen HTML schrijft, maar JSX! Uw code wordt getranspileerd van JSX naar JavaScript. Bijvoorbeeld:
render() {
return (<p>foo bar</p>);
}
wordt omgezet in:
render() {
return React.createElement("p", null, "foo bar");
}
Tenzij u nieuw bent met programmeren in het algemeen, weet u al dat functies/methoden (van elke taal) een willekeurig aantal parameters aannemen, maar altijd slechts éénwaarde retourneren. Gezien dat, kunt u waarschijnlijk zien dat er een probleem ontstaat wanneer u probeert meerdere componenten van hetzelfde niveau te retourneren op basis van hoe createElement()werkt; het heeft alleen parameters nodig voor éénelement en geeft dat terug. Daarom kunnen we niet meerdere elementen uit één functieaanroep retourneren.
Dus als je je ooit hebt afgevraagd waarom dit werkt…
render() {
return (
<div>
<p>foo</p>
<p>bar</p>
<p>baz</p>
</div>
);
}
maar niet dit…
render() {
return (
<p>foo</p>
<p>bar</p>
<p>baz</p>
);
}
het is omdat in het eerste fragment beide <p>-elementen deel uitmaken van childrenvan het <div>-element . Als ze deel uitmaken van children, kunnen we een onbeperkt aantal broer/zus-elementen uitdrukken. Kijk eens hoe dit zich zou vertalen:
render() {
return React.createElement(
"div",
null,
React.createElement("p", null, "foo"),
React.createElement("p", null, "bar"),
React.createElement("p", null, "baz"),
);
}
Oplossingen
Afhankelijk van welke versie van React je gebruikt, heb je een paar opties om dit aan te pakken:
-
Gebruik fragmenten (alleen React v16.2+!)
Sinds React v16.2 heeft React ondersteuning voor Fragments, een component zonder knooppunten die de onderliggende items rechtstreeks retourneert.
Het retourneren van de kinderen in een array (zie hieronder) heeft enkele nadelen:
- Kinderen in een array moeten worden gescheiden door komma’s.
- Kinderen in een array moeten een sleutel hebben om de sleutelwaarschuwing van React te voorkomen.
- Tekenreeksen moeten tussen aanhalingstekens staan.
Deze worden geëlimineerd door het gebruik van fragmenten. Hier is een voorbeeld van kinderen verpakt in een fragment:
render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> ); }waarin ontsuikerd wordt:
render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> ); }Houd er rekening mee dat het eerste fragment Babel v7.0 of hoger vereist.
-
Retourneer een array (alleen React v16.0+!)
Vanaf React v16 kunnen React Components arrays retourneren. Dit is in tegenstelling tot eerdere versies van React waar je gedwongen werd om alle zustercomponenten in een bovenliggende component in te pakken.
Met andere woorden, u kunt nu het volgende doen:
render() { return [<p key={0}>foo</p>, <p key={1}>bar</p>]; }dit vertaalt zich in:
return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")];Merk op dat het bovenstaande een array retourneert. Arrays zijn geldige React Elements sinds React versie 16 en later. Voor eerdere versies van React zijn arrays geen geldige retourobjecten!
Houd er ook rekening mee dat het volgende ongeldigis (u moet een array retourneren):
render() { return (<p>foo</p> <p>bar</p>); }
-
Wikkel de elementen in een bovenliggend element
De andere oplossing omvat het maken van een bovenliggende component die de broer/zus-componenten in zijn
childrenverpakt. Dit is verreweg de meest gebruikelijke manier om dit probleem aan te pakken en werkt in alle versies van React.render() { return ( <div> <h1>foo</h1> <h2>bar</h2> </div> ); }Opmerking: kijk nog eens bovenaan dit antwoord voor meer details en hoe dit zich vertaalt.
Antwoord 6, autoriteit 3%
Reageer 16.0.0we kunnen meerdere componenten van render als een array retourneren.
return ([
<Comp1 />,
<Comp2 />
]);
Reageren 16.4.0we kunnen meerdere componenten van render retourneren in een Fragment-tag. Fragment
return (
<React.Fragment>
<Comp1 />
<Comp2 />
</React.Fragment>);
Future Reactu kunt deze verkorte syntaxis gebruiken. (veel tools ondersteunen het nog niet, dus misschien wil je expliciet <Fragment>schrijven totdat de tooling inhaalt.)
return (
<>
<Comp1 />
<Comp2 />
</>)
Antwoord 7
Als u uw component niet inpakt, kunt u deze op de onderstaande manier schrijven.
In plaats van:
return(
<Comp1 />
<Comp2 />
);
je kunt dit schrijven:
return[(
<Comp1 />
),
(
<Comp2 />
) ];
Antwoord 8
het is heel eenvoudig dat we een bovenliggend element div kunnen gebruiken om al het element in te pakken
of we kunnen het concept van de Hogere Orde Component (HOC’s) gebruiken, d.w.z. erg handig voor:
react js-applicaties
render() {
return (
<div>
<div>foo</div>
<div>bar</div>
</div>
);
}
of een andere beste manier is HOC, het is heel eenvoudig, niet erg ingewikkeld
voeg gewoon een bestand hoc.js toe aan uw project en voeg eenvoudig deze codes toe
const aux = (props) => props.children;
export default aux;
importeer nu het hoc.js-bestand waar je het wilt gebruiken, nu in plaats van in te pakken met div
element dat we kunnen omwikkelen met hoc.
import React, { Component } from 'react';
import Hoc from '../../../hoc';
render() {
return (
<Hoc>
<div>foo</div>
<div>bar</div>
</Hoc>
);
}
Antwoord 9
Er is een regel in reactie dat een JSX-expressie precies één buitenste element moet hebben.
fout
const para = (
<p></p>
<p></p>
);
correct
const para = (
<div>
<p></p>
<p></p>
</div>
);
Antwoord 10
React 16 haalt je return op als een array, dus het moet worden ingepakt door één element, zoals div.
Verkeerde benadering
render(){
return(
<input type="text" value="" onChange={this.handleChange} />
<button className="btn btn-primary" onClick= {()=>this.addTodo(this.state.value)}>Submit</button>
);
}
Juiste aanpak (alle elementen in één div of ander element dat u gebruikt)
render(){
return(
<div>
<input type="text" value="" onChange={this.handleChange} />
<button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
</div>
);
}
Antwoord 11
Reageercomponenten moeten in een enkele container worden verpakt, dat kan elke tag zijn
bijv. “< div>.. < / div>”
U kunt de weergavemethode van ReactCSSTransitionGroup controleren
Antwoord 12
Beeld importeren en in Viewplaatsen. Wikkelen in een divwerkte niet voor mij.
import { View } from 'react-native';
...
render() {
return (
<View>
<h1>foo</h1>
<h2>bar</h2>
</View>
);
}
Antwoord 13
Ongeldig:Niet alleen onderliggende elementen
render(){
return(
<h2>Responsive Form</h2>
<div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
<div className="col-sm-4 offset-sm-4">
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="form-group">
<label for="name">Name</label>
<input type="text" className="form-control" id="name" />
</div>
<div className="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
</div>
<div className="form-group">
<label for="message">Message</label>
<textarea className="form-control" rows="5" id="message"></textarea>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
)
}
Geldig:Rootelement onder onderliggende elementen
render(){
return(
<div>
<h2>Responsive Form</h2>
<div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
<div className="col-sm-4 offset-sm-4">
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="form-group">
<label for="name">Name</label>
<input type="text" className="form-control" id="name" />
</div>
<div className="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
</div>
<div className="form-group">
<label for="message">Message</label>
<textarea className="form-control" rows="5" id="message"></textarea>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</div>
)
}
Antwoord 14
Gewoon toevoegen
<>
// code ....
</>
Antwoord 15
Voor Rect-Native ontwikkelaars. Ik kom deze fout tegen tijdens renderingItem in FlatList. Ik had twee tekstcomponenten. Ik gebruikte ze zoals hieronder
renderItem = { ({item}) =>
<Text style = {styles.item}>{item.key}</Text>
<Text style = {styles.item}>{item.user}</Text>
}
Maar nadat ik deze Inside View-componenten had geplaatst, werkte het voor mij.
renderItem = { ({item}) =>
<View style={styles.flatview}>
<Text style = {styles.item}>{item.key}</Text>
<Text style = {styles.item}>{item.user}</Text>
</View>
}
Misschien gebruikt u andere componenten, maar het kan voor u werken om ze in View te plaatsen.
Antwoord 16
Ik denk dat de complicatie ook kan optreden bij het nesten van meerdere Div’s in de return-instructie. Mogelijk wilt u dit doen om ervoor te zorgen dat uw componenten als blokelementen worden weergegeven.
Hier is een voorbeeld van het correct weergeven van een aantal componenten, met behulp van meerdere div’s.
return (
<div>
<h1>Data Information</H1>
<div>
<Button type="primary">Create Data</Button>
</div>
</div>
)