reactjs - 我可以在 React 的另一个组件中重用一个组件的片段吗?
问题描述
我在 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" &&
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 &&
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;
我只需要第二个片段中的第一个片段具有相同的功能。
解决方案
如果我理解正确,您想将前一个组件的设计和功能用到第二个组件。在这种情况下,您可以简单地导出第一个组件并在第二个组件中导入它。然后,您可以在返回函数中添加该组件。除此之外,不可能使用从一个文件到另一个文件的代码
推荐阅读
- angular - 升级到 Angular 6 后 npm install 出错
- javascript - Jquery - 附加html元素时如何添加自定义数据属性
- java - 为什么当属性的类使用@JsonSerialize 的转换器时,@JsonUnwrapped 会被忽略?
- css - CSS背景渐变过渡不起作用
- javascript - javascript中位置x,y的SVG免费像素
- javascript - 每当渲染或重新渲染组件时,是否有办法控制台日志?
- angular-material - 升级到 Angular 6 后的 angular_material_schematics 文件夹
- node.js - 400 错误请求将 /favicon.ico 作为 req.url 在 express 中返回。
- scala - Scala中的“捆绑”函数
- azure - AAD:是否可以将 Microsoft Graph 开放扩展放入 AD 应用程序清单中的 optionalClaims 中?