Question

我正在尝试将一个布尔值传递给我的组件，以便它可以根据是真还是假来生成图像，但是我不确定如何执行此操作。

代码如下：

将布尔值传递给组件：

<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

在showImage中添加花括号以破坏它

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 2

从

更改显示图像组件

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

Answer 3

如果prop值为false时没有要呈现的组件，我将使用&&运算符而不是内联if语句使用条件渲染。

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>
);

Demo

反应将布尔值传递给组件

3 个答案: