如何使用三进制在JSX语法中嵌套if-else ?

Question

我试图在JSX中实现以下目标:

if (declineButtonMessage) {
if (buttonDirection === 'column') {
render button 1
} else {
render button 2
}
}

我到目前为止有这个:

{declineButtonMessage && (

)}

我试着把这个偷偷带进去:

buttonDirection === 'column' ? <StyledDeclineButton buttonDirection={buttonDirection} title={declineButtonMessage} wide onPress={onSecondaryAction} /> : <SecondaryButton buttonDirection={buttonDirection} title={declineButtonMessage} wide onPress={onSecondaryAction} />

但它不工作，我的linter疯了。我想我犯了某种JSX语法错误

Answer 1

这应该对你有帮助

{
declineButtonMessage 
? (buttonDirection === 'column' ? <button1 /> : <button2 />)
: null
}

Answer 2

{!!declineButtonMessage && (buttonDirection === 'column' ? <button1 /> : <button2 />)}

请试试这个