reactjs - React 将 bool 值传递给组件

Question

我正在尝试将 bool 值传递给我的组件，以便它可以根据它的真假来显示图像，但我不太确定如何继续。

这是代码:

将 bool 值传递给组件:

<SomeComponent showImage={false}/>

尝试在组件上使用它:

const TheImage = showImage => (

      <div align="center">
        {showImage ? (<img src={ImageIwant} alt="The image i want" width="80%" height="80%" />) : ''}
        <p>Here is the image</p>
      </div>); 

我是新手，我不知道为什么这不起作用。

Answer 1

更改显示图像组件

const TheImage = showImage => (

  <div align="center">
    {showImage ? (<img src="https://lcsc.academyofmine.com/wp-content/uploads/2017/06/Test-Logo.svg.png" alt="The image i want" width="80%" height="80%" />) : ''}
    <p>Here is the image</p>
  </div>);

至

const TheImage = prop => (

  <div align="center">
    {prop.showImage ? (<img src="https://lcsc.academyofmine.com/wp-content/uploads/2017/06/Test-Logo.svg.png" alt="The image i want" width="80%" height="80%" />) : ''}
    <p>Here is the image</p>
  </div>);

因为您的组件将 prop 作为对象，所以如果您想访问传递的任何属性，您需要使用 prop.yourpropertyname

Demo