¿Puedo reutilizar un fragmento de un componente en otro componente en la react?

Tengo un fragmento en un componente de react que quiero usar en un componente separado, ¿hay alguna manera de que pueda reutilizar el fragmento?

Aquí está el fragmento del primer componente que quiero acceder:

  
{this.state.sharing === false ? (
  

    {this.renderNoInternet()}
    {this.renderRedirect()}
    
    


    

      {this.state.me.cameraStatus === "Out"
        ? null
        : this.state.coworkers.map((user, index) => {
            if (user.id !== parseInt(localStorage.getItem("me.id")))
              return (
                
              );
            else return null;
          })}
      

         {
            try {
              WebRTC.leaveWorkspace(this.workspaceId);
              WebRTC.disconnect();
            } catch (e) {}
          }}
        >
          
        
      

      {this.myIndex !== -1 ? (
        
      ) : null}
      {this.state.me.cameraStatus === "Out" &&
      this.state.activeUsers >= 0 ? (
        

          {this.activeUsersText}
          

          

          

        

      ) : null}
      {this.state.coworkers.length === 0 &&
      this.state.me.cameraStatus !== "Out" ? (
        

          

          Feels a little quiet in here.
          

          Invite some friends or coworkers.
        

      ) : null}

      {this.state.beingKnocked.status === true ? (
        
      ) : null}
      {this.state.knocking.status === true ? (
        
      ) : null}
      {this.state.callAccepted === true ? (
        
      ) : null}
    

  

) : (
  
)}

Y quiero acceder a él en otro componente:

import React, { Component, Fragment } from "react";
import UserThumbnail from "./UserThumbnail";
import AudoUpdatePopup from "./AudoUpdatePopup";
import { Link } from "react-router-dom";
import WebRTC from "../../assets/js/webrtc.js";
import BeingKnocked from "./screens/BeingKnocked";
import Knocking from "./screens/Knocking";
import CallScreen from "./screens/CallScreen";
import Header from "./Header";
import Dashboard from "./Dashboard";

// Styling
const h1Style = {
    width: '107px',
    height: '27px',
    fontFamily: 'Lato',
    fontSize: '22px',
    fontWeight: 'bold',
    fontStretch: 'normal',
    fontStyle: 'normal',
    lineHeight: 'normal',
    letterSpacing: '-0.73px',
    textAlign: 'center',
    color: "#000062",
};
const modalStyle = {
    display: 'none',
    position: 'fixed',
    zIndex: 1,
};
const modalContentStyle = {
    position: 'absolute',
    backgroundColor: 'white',
};

export class AddressingPopup extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
        return (
            // Fragment goes here
        );
    }
}
export default AddressingPopup;

Solo necesito la misma funcionalidad del primer fragmento en el segundo.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bytebarricade

3 Respuestas:

  • Si he entendido correctamente, desea utilizar el diseño y la funcionalidad del componente anterior al segundo. En ese caso, simplemente puede exportar el primer componente e importarlo en el segundo. A continuación, puede añadir ese componente en la función de retorno. Aparte de eso, no es posible utilizar un código de un archivo a otro

    Respondida el Dec 17, 2020 a las 19:30 - por bitcraftsman

    Votos positivos: 0 | Votos negativos: 0

  • Sí, puedes reutilizar un fragmento de un componente en otro componente en React. Para hacerlo, puedes extraer el fragmento que deseas reutilizar en un componente separado y luego importarlo en los componentes donde quieras utilizarlo.

    En tu caso, puedes crear un nuevo componente que contenga el fragmento que deseas reutilizar. Aquí te muestro un ejemplo de cómo podrías hacerlo:

    • Crea un nuevo componente llamado `MyFragment.js` que contenga el fragmento que deseas reutilizar:
    jsx
import React from "react";

const MyFragment = (props) => {
  return (
    
      {props.sharing === false ? (
        
    
          {/ Insert the rest of your fragment content here /}
        
    
      ) : (
        
      )}
        
  );
};

export default MyFragment;
    • Luego, en el componente donde deseas usar este fragmento (por ejemplo, `AddressingPopup.js`), importa el componente `MyFragment` y utilízalo en tu renderizado:
    jsx
import React, { Component, Fragment } from "react";
import MyFragment from "./MyFragment";

export class AddressingPopup extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      
    
        {/ Other components or elements /}
        
        {/ Other components or elements /}
      
    
    );
  }
}

export default AddressingPopup;

    De esta manera, puedes reutilizar el fragmento en el componente AddressingPopup de la misma forma que lo estabas utilizando en el primer componente. Solo asegúrate de pasar las propiedades necesarias al fragmento cuando lo estés utilizando en el nuevo componente.

    Respondida el Dec 18, 2020 a las 19:28 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Método 1: Usar prop children

    Crea una prop llamada children en el componente donde quieres reutilizar el fragmento y pasa el fragmento como children en el otro componente.

    Componente 1:

    
export const FragmentComponent = () => {
  return (
    
      {/ Contenido del fragmento /}
    
  );
};

    Componente 2:

    
import { FragmentComponent } from './FragmentComponent';

export const OtherComponent = () => {
  return (
    
    
      
    
    
  );
};

    Método 2: Usar la composición

    Crea un componente compuesto que envuelva el fragmento y utilízalo en el otro componente.

    Componente compuesto:

    
export const FragmentWrapper = (props) => {
  return (
    
      {/ Contenido del fragmento /}
      {props.children}
    
  );
};

    Componente 2:

    
import { FragmentWrapper } from './FragmentWrapper';

export const OtherComponent = () => {
  return (
    
    
      
        {/ Contenido del fragmento /}
      
    
    
  );
};

    El componente FragmentWrapper usa la misma API que Fragment, por lo que puedes utilizarla como un reemplazo directo.

    Método 3: Usar portales

    Los portales te permiten renderizar contenido fuera de su jerarquía DOM normal. Esto te permite mover el fragmento a un área diferente de la interfaz de usuario.

    Componente 1:

    
import { createPortal } from 'react-dom';

export const FragmentComponent = () => {
  return createPortal(
    
      {/ Contenido del fragmento /}
    ,
    document.getElementById('fragment-container')
  );
};

    Componente 2:

    
import { FragmentComponent } from './FragmentComponent';

export const OtherComponent = () => {
  return (
    
    
      
    
      {/ Otro contenido /}
    
    
  );
};

    En este ejemplo, el fragmento se renderiza en un elemento con el ID fragment-container, que debe existir en el marcado HTML.

    Respondida el Dec 18, 2020 a las 19:37 - por Gemini

    Votos positivos: 0 | Votos negativos: 0