如何在javascript中正确呈现类似jsx的html
如何在javascript中正确呈现类似jsx的html
提问于 2018-10-27 05:07:54
我有一个react组件，它根据状态用另一个组件呈现一些块。如何在JS中同时呈现类似HTML的JSX和组件？
class Feedback extends Component {
constructor(props) {
super(props);
this.state = {
storeInputShow: true
};
}
render() {
return (
<div>
{ this.state.storeInputShow ?
<div className="form_field" style={{ marginBottom: '4px' }}>
<Text textTag="div">
Select shop
</Text>
</div>
<Autocomplete
items={this.state.storeList}
shouldItemRender={(item, value) => item.label && item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, highlighted) =>
<div
key={item.id}
style={{ backgroundColor: highlighted ? '#eee' : '#ffffff', ...selectItemStyle }}
>
{item.label}
</div>
}
value={store}
onChange={e => this.setState({ store: e.target.value, storeId: e.target.id })}
onSelect={(store,storeCard) => this.setState({ store, storeId: storeCard.id })}
inputPlaceholder="Shop"
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>
: null
}
</div>
);
}现在的错误如下：
JSX SyntaxError:相邻的JSX元素必须包装在封闭标记中
在<Autocomplete标签上。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-10-27 05:24:40
这个错误是不言而喻的，您应该将两个组件都包装在一个组件中，以使您的条件工作。
<div>
<div className="form_field" style... />
<Autocomplete items={this.state.storeList} should... />
</div>可以使用React.Fragment而不是<div />
BONUS：您可以使用以下语法删除end null大小写
<div>
{ this.state.storeInputshow && <YourComponents /> }
</div>这样，您将只在storeInputShow在状态下可用时呈现，否则不需要返回null。
Stack Overflow用户
发布于 2018-10-27 05:23:46
你不能把if放入一个return中，但你可以放一个变量。
class Feedback extends Component {
constructor(props) {
super(props);
this.state = {
storeInputShow: true
};
}
render() {
let form;
if (this.state.storeInputShow)
form = <div className="form_field" style={{ marginBottom: '4px' }}>
<Text textTag="div">
Select shop
</Text>
</div>
<Autocomplete
items={this.state.storeList}
shouldItemRender={(item, value) => item.label && item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, highlighted) =>
<div
key={item.id}
style={{ backgroundColor: highlighted ? '#eee' : '#ffffff', ...selectItemStyle }}
>
{item.label}
</div>
}
value={store}
onChange={e => this.setState({ store: e.target.value, storeId: e.target.id })}
onSelect={(store,storeCard) => this.setState({ store, storeId: storeCard.id })}
inputPlaceholder="Shop"
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>;
return (
<div>{ form }</div>
);Stack Overflow用户
发布于 2018-10-27 05:26:28
代码中的问题是，在if条件中，对于true情况，您返回两个元素(，)，但在JSX中，它希望每个返回都是一个元素(可以有任意数量的子元素)。因此，只需使用包装器将元素包装在if-condition中即可。
class Feedback extends Component {
constructor(props) {
super(props);
this.state = {
storeInputShow: true
};
}
render() {
return (
<div>
{ this.state.storeInputShow ?
<div>
<div className="form_field" style={{ marginBottom: '4px' }}>
<Text textTag="div">
Select shop
</Text>
</div>
<Autocomplete
items={this.state.storeList}
shouldItemRender={(item, value) => item.label && item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, highlighted) =>
<div
key={item.id}
style={{ backgroundColor: highlighted ? '#eee' : '#ffffff', ...selectItemStyle }}
>
{item.label}
</div>
}
value={store}
onChange={e => this.setState({ store: e.target.value, storeId: e.target.id })}
onSelect={(store,storeCard) => this.setState({ store, storeId: storeCard.id })}
inputPlaceholder="Shop"
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>
</div>
: null
}
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53016318
复制相关文章
相似问题