如何在同一行中显示两个 JSX 元素而不显示一个或另一个？

Question

如何在同一行中并排显示两个条件？

如果使用第一个只显示图片如果使用第二个只显示视频。

import React, { useState } from "react";
import { Card } from "react-bootstrap";

function LastArticles({ postagem }) {
  const [isImage, setImage] = useState(true);
    const [isImage, setImage] = useState(true)
  const Condition1 = () => {
    return (
      <>
        <Card className="my-3 p-3" rounded>
          <a href={`/postagem/${postagem._id}`}>
            <Card.Img
              className="containerImg"
              src={postagem.media}
              variant="top"
            />
          </a>
                    <Card.Img className="containerImg" src={postagem.media} variant='top' />
          <Card.Body>
            <a href={`/postagem/${postagem._id}`}>
              <Card.Title as="div">
                <strong>{postagem.title}</strong>
              </Card.Title>
            </a>
                </a>
            <Card.Text as="h4">Criado :</Card.Text>
          </Card.Body>
        </Card>
      </>
    );
  };
                <Card.Body>
  const Condition2 = () => {
    return (
      <>
        <Card className="my-3 p-3" rounded>
          <a href={`/postagem/${postagem._id}`}>
            <Card className="containerImg">
              <video className="containerImg" autoPlay loop muted>
                <source src={postagem.media} type="video/mp4"></source>
              </video>
            </Card>
          </a>
                    <a href={`/postagem/${postagem._id}`}>
          <Card.Body>
            <a href={`/postagem/${postagem._id}`}>
              <Card.Title as="div">
                <strong>{postagem.title}</strong>
              </Card.Title>
            </a>
                        <Card.Title as='div'>
            <Card.Text as="h4">Criado :</Card.Text>
          </Card.Body>
        </Card>
      </>
    );
  };
                    </a>
  return (
    <div>
      {isImage ? <Condition1 /> : setImage(false)}
      {isImage ? <Condition2 /> : setImage(false)}
    </div>
  );
}
export default LastArticles;

Answer 1

这是重复的useState，只有一次，改正语法，从这里到，

const [isImage, setImage] = useState(true);

这样写，而不是

const [image1, setImage1] = useState(true);
const [image2, setImage2] = useState(true);

只有css才能实现，使用带有两列屏幕显示的网格

.wrapper {
  display: grid;
  grid-template-columns: 2fr 2fr;
}


<div class="wrapper">
  <div>{image1 ? <Condition1/> : setImage1(false)}</div>
  <div>{image2 ? <Condition2/> : setImage2(false)}</div>
</div>

Answer 2

import React from 'react'
import { Card } from 'react-bootstrap'

function LastArticles({ postagem }) {

const DisplayImVi = () => {

    const isVideo = postagem.media.split('.').pop() === 'mp4'

    return( 
    <>
        <Card className='my-3 p-3' rounded>
                
            <a href={`/postagem/${postagem._id}`}>
        
                { !isVideo &&
                    <Card.Img className="containerImg" src={postagem.media} variant='top' /> 
                }

                {isVideo &&
                    <Card>
                        <video className="containerImg" autoPlay loop muted src={postagem.media}>
                        </video>
                    </Card>
                }

            </a>

            <Card.Body>

                <a href={`/postagem/${postagem._id}`}>

                    <Card.Title as='div'>
                        
                        <strong>
                            {postagem.title}
                        </strong>
                    
                    </Card.Title>

                </a>

                <Card.Text as='h4'>
                    Criado : 
                </Card.Text>

            </Card.Body>
    
        </Card>
    </>
    )
}

return (

    <div>
          {<DisplayImVi/>}
    </div>

)

}
export default LastArticles

为了解决这个问题，我必须删除函数 LastArticles 中的条件之一，删除 useState intead 我创建了一个调用方法 .split('.') 的变量使用点和方法 .pop() 搜索 itens 以获取最后一项。在 <a> 内部，我短路评估以检查并显示同一行中的两个元素。

如何在同一行中显示两个 JSX 元素而不显示一个或另一个？

How can I display both of JSX elements in the same row without one or another?

html

reactjs

react-bootstrap

react-hooks