React的条件代码片段显示了两种情况

Question

我试图根据是否存在prop来显示不同的代码段，但是下面的代码却同时显示了这两种情况-有人可以看到我要去哪里了吗？

{
    this.props.isParallax ?
    <Plx>
        <Component.../>
    </Plx> 
:
    <Component.../>
}

Answer 1

如下面的代码片段所示，您的语法是正确的，您可能在渲染的其他地方犯了错字错误：

const Test = props => {
    return(
        <div>
            {props.isParallax ?
                <div>
                    <p>Totally a prallax lul</p>
                </div>
                :
                <p>Not a parallax</p>
            }
        </div>
    )
}

ReactDOM.render(<Test isParallax/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id='root'>

您确定三元化封装在JSX组件中吗？

您可以发布更多代码吗？

Answer 2

您可以尝试

{
function() {
  this.props.isParallax ?
    return <Plx>
             <Component.../>
           </Plx>
  :
    return <Component.../>
}
}

Answer 3

我认为您缺少包含组件的括号。您可以尝试一下

{
this.props.isParallax ?
(<Plx>
    <Component.../>
</Plx> )
:
   ( <Component.../>)
}