如何在javascript中正确呈现类似jsx的html

我有一个react组件，它根据状态用另一个组件渲染某个块。如何呈现类似于JSX的HTML和JS内部的组件

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

类反馈扩展组件{
建造师（道具）{
超级（道具）；
此.state={
storeInputShow：正确
};
}
render（）{
返回(
{this.state.storeInputShow？
精选商店
item.label&&item.label.toLowerCase（）.indexOf（value.toLowerCase（））>-1}
getItemValue={item=>item.label}
renderItem={（项目，高亮显示）=>
{item.label}
}
值={store}
onChange={e=>this.setState（{store:e.target.value，storeId:e.target.id}）}
onSelect={（store，storeCard）=>this.setState（{store，storeId:storeCard.id}）}
inputPlaceholder=“店铺”
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>
：null
}
);
}

目前的错误如下：

SyntaxError：相邻的JSX元素必须包装在一个封闭的标记中

---

在

中，您不能将if放入一个返回中，但可以放入一个变量

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

类反馈扩展组件{
建造师（道具）{
超级（道具）；
此.state={
storeInputShow：正确
};
}
render（）{
让它形成；
if（this.state.storeInputShow）
表格=
精选商店
item.label&&item.label.toLowerCase（）.indexOf（value.toLowerCase（））>-1}
getItemValue={item=>item.label}
renderItem={（项目，高亮显示）=>
{item.label}
}
值={store}
onChange={e=>this.setState（{store:e.target.value，storeId:e.target.id}）}
onSelect={（store，storeCard）=>this.setState（{store，storeId:storeCard.id}）}
inputPlaceholder=“店铺”
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>;
返回(
{form}
);
您不能将if输入返回，但可以输入变量

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

类反馈扩展组件{
建造师（道具）{
超级（道具）；
此.state={
storeInputShow：正确
};
}
render（）{
让它形成；
if（this.state.storeInputShow）
表格=
精选商店
item.label&&item.label.toLowerCase（）.indexOf（value.toLowerCase（））>-1}
getItemValue={item=>item.label}
renderItem={（项目，高亮显示）=>
{item.label}
}
值={store}
onChange={e=>this.setState（{store:e.target.value，storeId:e.target.id}）}
onSelect={（store，storeCard）=>this.setState（{store，storeId:storeCard.id}）}
inputPlaceholder=“店铺”
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>;
返回(
{form}
);
错误是不言自明的，您应该将两个组件包装在一个组件中，以使您的条件工作

<div>
    <div className="form_field" style... />
    <Autocomplete items={this.state.storeList} should... />
</div>

这样，仅当storeInputShow在该状态下可用时才进行渲染，如果不可用，则无需返回null。
错误是不言自明的，您应该将两个组件包装在一个组件中以使条件工作

<div>
    <div className="form_field" style... />
    <Autocomplete items={this.state.storeList} should... />
</div>

这样，仅当storeInputShow在该状态下可用时才进行渲染，如果不可用，则无需返回null。
代码中的问题是，在if条件下，如果为true，则返回两个元素（，），但在JSX中，它希望每次返回一个元素（可以有任意数量的子元素）.所以只需使用包装器将元素包装在if条件中

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

类反馈扩展组件{
建造师（道具）{
超级（道具）；
此.state={
storeInputShow：正确
};
}
render（）{
返回(
{this.state.storeInputShow？
精选商店
item.label&&item.label.toLowerCase（）.indexOf（value.toLowerCase（））>-1}
getItemValue={item=>item.label}
renderItem={（项目，高亮显示）=>
{item.label}
}
值={store}
onChange={e=>this.setState（{store:e.target.value，storeId:e.target.id}）}
onSelect={（store，storeCard）=>this.setState（{store，storeId:storeCard.id}）}
inputPlaceholder=“店铺”
wrapperStyle={selectWrapperStyle}
menuStyle={selectMenuStyle}
/>
：null
}
);
}
代码中的问题是，在if条件下，对于true情况，您返回两个元素（，），但在JSX中，它希望每个返回都是一个元素（可以有任意数量的子元素）。所以只需使用包装器将元素包装在if条件中

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

类反馈扩展组件{
建造师（道具）{
超级（道具）；
此.state={
storeInputShow：正确
};
}
render（）{
返回(