Question

这是我的原始代码，可以使我的img标签很好：

    import React from 'react' 
    import './Arena.css'

    function Arena({ phase }) {

return (
    <div className='backBoard'>
        <div className='canvas'>

        <img style={{height:"320px", width: '280px'}} src= 
   {require('./stickman/11.png')}/>

        </div>
    </div>)
    }

    export default Arena

phase =通过props传递的整数0。我尝试过：

import React from 'react' 
import './Arena.css'

function Arena({ phase }) {

return (
    <div className='backBoard'>
        <div className='canvas'>

        {
            phase === 0
            ?
            <img style={{height:"320px", width: 
'280px'}} 
    src={require('./stickman/11.png')}/>
            :
            "not image"

        }

        </div>
    </div>)
}

export default Arena

呈现网页时，三元运算符返回的字符串是“ not image”。是否有适用于此特定情况的其他条件语句？还是不同的方法？

Answer 1

在这种特定情况下是否存在其他条件语句？

您可以使用“ &&”，检查下面的示例。

关于您的问题，您确定您的“阶段”道具为0吗？

尝试此操作并剪切并粘贴console.log输出：

import React from 'react' 
import './Arena.css'

const Arena = ({ phase }) => {
  console.log(phase);
  console.log(typeof phase);
  return (
    <div className='backBoard'>
        <div className='canvas'>
        {
            (phase === 0) && (
              <img
                style={{height:"320px", width: '280px'}} 
                src={require('./stickman/11.png')} />
            )
        }
        </div>
    </div>
  )
}

export default Arena

它应该显示0和'number'。

我试图在我的react组件中使用三元运算符来呈现<img>标签，但是当我运行代码时，我的<img>标签会被忽略

1 个答案: