javascript - 显示不同元素取决于三元

Question

我试图根据三元组显示不同的 HTML 元素，但我不知道它的正确语法。

{valuePro ?
                {
                <Button
                    className="proButton"
                    secondary
                    onClick={triggerFileSelectPopup}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                >
                    Change
                </Button>
                <Button
                    className="proButton"
                    onClick={onDownload}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                    Confirm
                </Button>
                 } :
                {
                <GenericButton
                    secondary
                    onClick={triggerFileSelectPopup}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                >
                    Change
                </GenericButton>
                <GenericButton
                    onClick={onDownload}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                    Confirm
                </GenericButton>
                }
}

我想显示 valuePro 何时为真，何时 valuePro 为假。

标签： javascriptreactjs

Answer 1

<>如果这是您遇到的错误，则将多个嵌套元素包装在 a 中应该可以使其正常工作。

{valuePro ?
                <>
                    <Button
                        className="proButton"
                        secondary
                        onClick={triggerFileSelectPopup}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                    >
                        Change
                    </Button>
                    <Button
                        className="proButton"
                        onClick={onDownload}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                        Confirm
                    </Button>
                </> :
                <>
                    <GenericButton
                        secondary
                        onClick={triggerFileSelectPopup}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                    >
                        Change
                    </GenericButton>
                    <GenericButton
                        onClick={onDownload}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                        Confirm
                    </GenericButton>
                </>
}