javascript - 如何在 javascript 中正确渲染类似 jsx 的 html

Question

我有一个 react 组件，它根据状态使用另一个组件渲染一些 block 。如何在 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>
    );
}

现在错误如下:

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag

在 <Autocomplete标签。

Answer 1

该错误是不言自明的，您应该将两个组件包装在一个组件中以使您的条件起作用。

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

您可以使用 React.Fragment而不是<div />

奖励:您可以使用以下语法删除结尾 null案例

<div>
    { this.state.storeInputshow && <YourComponents /> }
</div>

这样，您只会在 storeInputShow 在该状态下可用时进行渲染，而无需返回 null。