Блог

У меня есть фрагмент в компоненте React, который я хочу использовать в отдельном компоненте, могу ли я каким-либо образом повторно использовать фрагмент?

Вот фрагмент из первого компонента, к которому я хочу получить доступ:

   <Fragment>
{this.state.sharing === false ? (
  <div className="video-container">
    {this.renderNoInternet()}
    {this.renderRedirect()}
    <AudoUpdatePopup />
    <Header
      me={this.state.me}
      logoutHandler={this.logoutHandler}
      changeCameraStatus={this.changeCameraStatus}
      changeMicrophoneStatus={this.changeMicrophoneStatus}
      audioDevices={this.state.audioDevices}
      videoDevices={this.state.videoDevices}
      onChangeCamera={this.changeCamerahandler}
      onChangeMicrophone={this.changeMicrophoneHandler}
      knocking={{
        beingKnocked: this.state.beingKnocked.status,
        knocking: this.state.knocking.status,
        callAccepted: this.state.callAccepted,
      }}
    />

    <div className="user-container">
      {this.state.me.cameraStatus === "Out"
        ? null
        : this.state.coworkers.map((user, index) => {
            if (user.id !== parseInt(localStorage.getItem("me.id")))
              return (
                <UserThumbnail
                  onClick={this.startCall}
                  key={index}
                  user={user}
                  knocking={{
                    beingKnocked: this.state.beingKnocked.status,
                    knocking: this.state.knocking.status,
                    callAccepted: this.state.callAccepted,
                  }}
                />
              );
            else return null;
          })}
      <div
        className={
          this.state.beingKnocked.status === true ||
          this.state.callAccepted === true ||
          this.state.knocking.status === true
            ? "user-video opacity-cont-hide"
            : "user-video"
        }
        style={{ marginLeft: "8px" }}
      >
        <Link
          to="/InviteCoworker"
          onClick={() => {
            try {
              WebRTC.leaveWorkspace(this.workspaceId);
              WebRTC.disconnect();
            } catch (e) {}
          }}
        >
          <button className="invite-button">
            <img
              alt="User"
              src={require("../../assets/images/add-button.jpg")}
            />
            <p className="invite-text">Invite</p>
          </button>
        </Link>
      </div>
      {this.myIndex !== -1 ? (
        <UserThumbnail
          onClick={this.startCall}
          user={this.state.coworkers[this.myIndex]}
          knocking={{
            beingKnocked: this.state.beingKnocked.status,
            knocking: this.state.knocking.status,
          }}
        />
      ) : null}
      {this.state.me.cameraStatus === "Out" amp;amp;
      this.state.activeUsers >= 0 ? (
        <p className="set-status-text">
          {this.activeUsersText}
          <br />
          <br />
          <p
            dangerouslySetInnerHTML={this.createNoPermissionMarkup()}
          ></p>
        </p>
      ) : null}
      {this.state.coworkers.length === 0 amp;amp;
      this.state.me.cameraStatus !== "Out" ? (
        <p className="set-status-text">
          <br />
          Feels a little quiet in here.
          <br />
          Invite some friends or coworkers.
        </p>
      ) : null}

      {this.state.beingKnocked.status === true ? (
        <BeingKnocked
          payload={this.state.beingKnocked}
          streams={this.streams}
          hangUpCall={this.hangupCall.bind(this)}
          acceptCall={this.acceptCall.bind(this)}
        />
      ) : null}
      {this.state.knocking.status === true ? (
        <Knocking
          payload={this.state.knocking}
          streams={this.streams}
          hangUpCall={this.hangupCall.bind(this)}
        />
      ) : null}
      {this.state.callAccepted === true ? (
        <CallScreen
          { ...this.props } me={this.state.me} coworkers={this.state.coworkers}
          knocking={{
            beingKnocked: this.state.beingKnocked.status,
            knocking: this.state.knocking.status,
            callAccepted: this.state.callAccepted,
          }}
          // next try props=this.props state=this.state, then try props=...this.props state=...this.state
          // hangUpCall={this.hangupCall.bind(this)}
          // secondPartyStream={this.state.secondPartyStream}
          // startScreenShare={this.startScreenShare.bind(this)}
        />
      ) : null}
    </div>
  </div>
) : (
  <ShareScreen
    sharerVideo={this.state.sharerStream}
    myVideo={this.state.me.myClearVideo}
    micLevel={this.state.me.micAudioLevel}
    stopScreenShare={this.state.sharer ? this.hangupCall : this.stopScreenShare}
    //stopScreenShare={this.hangupCall} // This line of code will hangup the call when the screen share is over (MARK)
    sharer={this.state.sharer}
    secondPartyStream={this.state.secondPartyStream}
  />
)}
 

И я хочу получить к нему доступ в другом компоненте:

 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;
 

Мне просто нужна та же функциональность из первого фрагмента во втором.

Если я правильно понял, вы хотите использовать дизайн и функциональность из предыдущего компонента во втором. В этом случае вы можете просто экспортировать первый компонент и импортировать его во второй. Затем вы можете добавить этот компонент в возвращаемую функцию. Кроме этого, невозможно использовать код из одного файла в другой