我有一个登录页面和布局组件。布局组件有标题。我不想在登录中显示标题。为此我想获取 url 路径名。基于路径名显示标题。
import * as constlocalStorage from '../helpers/localstorage';
import Router from 'next/router';
export default class MyApp extends App {
componentDidMount(){
if(constlocalStorage.getLocalStorage()){
Router.push({pathname:'/app'});
} else{
Router.push({pathname:'/signin'});
}
}
render() {
const { Component, pageProps } = this.props
return (
//I want here pathname for checking weather to show header or not
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}
请帮忙
我将图像以 base64 格式存储在节点中。然后我收到它并存储在一个变量中。并将其显示在标签中，但未显示。从服务器接收正确的值。在渲染中，如果状态已设置，则函数条件为真。即使它为真，也不显示。
getImage() {
console.log('getImage');
axios.get(`http://localhost:4000/image/get`).then((result) => {
this.setState({ image: result })
console.log(result);
});
}
render(){
{this.state.image ? <img src={this.state.image}></img>: ''}
}
我得到了我存储在服务器中的精确 base64 字符串。它返回
<img src="[object Object]">
在 DOM.I 不知道我哪里出错了
编辑
router.route('/image/get').get((req, res) => {
console.log('inside img get');
Image.find((err, result) => {
if (err) {
res.json({ "error": true, "message": "error fetching data" });
} else {
// console.log(result);
res.json(result);
}
})
});
模型
const mongoose=require('mongoose');
const Schema=mongoose.Schema;
var ImageSchema=new Schema({
imageName:{
type:String
},
imageData:{
type:String
}
});
export …我有2页user.js，并nonuser.js与一个成分标题。user.js并nonuser.js具有相同的功能，但 UI 略有变化。现在我想整合所有这些。就像我访问页面时默认user.js必须查看的表一样。单击nonuser.js它应该更改为nonuser.js表格。而且我希望两者的标题相同，当我在页面之间切换时，文本框中的内容不应更改。
我是 next.js 的新手并做出反应
头文件.js
import React, { Component } from 'react';
import '../Header/header.css';
import { Menu, Input, Icon } from 'antd';
import Link from 'next/link';
class HeaderComponent extends Component {
render() {
return (
<div className="navbar">
<div className="header">
<div className="col-1">
<div className="menu">
<div>
<Link href="/User"><a>Users</a></Link>
</div>
<div>
<Link href="/nonUser"><a>Non Users</a></Link>
</div>
<Input className="text-box" placeholder="Enter name" prefix={<Icon type="search" ></Icon>}></Input>
</div>
</div>
</div>
</div>
) …我想在用户登录时显示一个按钮。如果用户未登录，则我不显示按钮。当用户登录时，我将设置本地存储值。当我在登录组件中设置本地存储时，标题组件必须侦听该事件，并且显示按钮。我正在使用 addEventListener 进行监听。但它没有在监听。
我不知道在 header 组件中在哪里听。
// HeaderComponent(header.js):
class HeaderComponent extends Component {
componentDidMount(){
if(typeof window!='undefined'){
console.log(localStorage.getItem("token"));
window.addEventListener("storage",function(e){
this.setState({ auth: true});
})
}
}
render() {
return (
<div className="header">
<div className="container">
<div className="header-content">
<img src={logo} alt="logo"></img>
<div className="nav-links" >
<ul >
<li>Home</li>
<li>About</li>
<li>Services</li>
<li><NavLink activeClassName="active" to="/upload" >Upload</NavLink></li>
<li><NavLink activeClassName="active" to="/signup"> Sign Up</NavLink></li>
{ this.state.auth? <li onClick={this.onLogout}>Logout</li> :null}
</ul>
</div>
</div>
</div>
</div>
);
}
}
//登录组件（登录.js）
class LoginComponent extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
} …我有标题组件，2 个页面和一个登录页面。使用 _app.js 覆盖 app.js，以便我可以在所有页面中包含标题。我有 2 个问题：-
1）在登录页面标题中出现。我不知道如何将其隐藏在_app.js中。
2）在 _app.js 加载时，我必须检查本地存储以确定用户是否已经登录，如果没有，则必须重定向到登录页面。
对于第二个问题，我可以做的一件事是在登录组件中检查本地存储 onComponenDidMount() 方法并基于本地存储重定向页面。
布局.js
class Layout extends Component {
render() {
const { children } = this.props
return (
<div className='layout'>
<Header />
{children}
</div>
);
}
}
_app.js
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}
登录.js
class Signin extends Component {
handleSubmit = e => {
e.preventDefault();
if(users.username ===document.getElementById('username').value …我开发了 Angular-Electron 应用程序。它是一个简单的应用程序，但其大小为 159Mb。我使用 Electron 构建器来构建 Electron 应用程序并包含自动更新包。当我解压 asar 文件时，它有节点模块。当我指定不时在package.json中包含节点模块，应用程序的大小减少到89mb，但应用程序没有运行。这是我的 package.json
{
"name": "example",
"version": "0.1.2",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dist": "electron-builder",
"electron": "ng build --base-href ./ && electron .",
"build:electron": "electron-builder build --mac --win --publish never",
"deploy": " electron-builder build --publish always"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.0.0",
"@angular/cdk": "^7.3.7",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": …我创建了一个电子应用程序。使用电子构建器我在linux中创建了appImage。我想在linux中为windows构建应用程序。但它抛出了wine required错误。请帮助解决这个问题。这是package.json
"name": "Gamer",
"version": "1.0.0",
"main": "main.js",
"repository": "https://github.com/XYX/GAME",
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
...
"electron-builder-squirrel-windows": "^22.1.0",
"electron-packager": "^14.1.0",
"electron-reload": "^1.5.0",
"electron-store": "^5.1.0",
},
"devDependencies": {
...
"electron": "^7.1.1",
"electron-builder": "^22.1.0",
"electron-prebuilt": "^1.4.13",
"electron-updater": "^4.2.0",
...
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:electron": "ng build --base-href ./ && electron .",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"build:Win": …使用 React 和 Electron 创建桌面应用程序。我想从 React 组件调用 Electron 的 main.js 中的方法。在 Angular 中有一个 npm 包。
import React, { useState, useEffect, useRef } from 'react';
import './diagnosis.css';
const electron = window.require('electron');// if i use require('electron') throws error
function Diagnosis(props) {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
getExeFiles();
});
const getExeFiles = () => {
electron.ipcRenderer.send('get-exe');
}
return(<></>)
}
main.js
electron.ipcMain.on('get-exe', () => {
console.log('reaciovg');
mainWindow.webContents.send('return-exe', '');
});
如何克服这个问题？
我正在使用 antd 表查看数据并使用单独的 antd 分页。我想设置 antd 表的页面大小如何实现它。我没有在 antd 表中使用默认表分页
<Pagination defaultCurrent={1} total={data.length} pageSize={2} onChange={this.setPaginationData}/>
<Table
rowKey={data._id}
columns={this.columns1}
rowSelection={this.rowSelection}
expandedRowRender={(record, index, indent, expanded) =>
this.expanding(record, expanded)
}
// pagination={{defaultCurrent:1, total:data.length, pageSize:2,position:'top'}}
onExpand={this.onExpand}
dataSource={data} />
请帮忙...
我试图在单击外部按钮时全屏显示视频。我尝试使用 ref 和 document.getElementByid() 。它引发了 requestFullscreen() 错误。是否有其他方法可以实现此目的。
const fullScreenVideoRef=useRef(null);
const onShowVideo=()=>{
if (fullScreenVideoRef.current.requestFullscreen) {
marioVideo.current.requestFullscreen();
}
else if (fullScreenVideoRef.current.msRequestFullscreen) {
marioVideo.msRequestFullscreen();
}
else if (fullScreenVideoRef.current.mozRequestFullScreen) {
marioVideo.current.mozRequestFullScreen();
}
else if (fullScreenVideoRef.current.webkitRequestFullScreen) {
marioVideo.current.webkitRequestFullScreen();
}
}
<video muted autoPlay loop controls id="full-screenVideo" ref={fullScreenVideoRef} >
<source src="/video/web-experience-cdn.mp4" type="video/mp4"/>
</video>
在角度7中，尝试使用角度材料mat-dialog-content。导入app.module.ts时会出现以下错误：
TypeError：Object（...）不是类似的函数：未捕获TypeError：Object（...）不是platform.es5.js：102上的函数。
package.json
{
"name": "image-cropp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.15",
"@angular/cdk": "^8.0.1",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/material": "^8.0.1",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"ngx-image-cropper": "^1.4.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.5",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": …我正在显示从 api 调用接收到的对象数组。我正在使用 react hooks。当我尝试遍历对象数组时，它返回的 foreach 不是一个函数。为此，我可以使用 await 和 async。
function searchArticle() {
const [articleList, setArticleList] = useState([]);
const { articleApiStatus, articleCurrentPage, searcArticle } = state;
useEffect(() => {
setArticleList(state.articleList);
articleListApiCall(articleCurrentPage);
}, [])
const articleListApiCall = (page = 1) => {
const isNewPage = articleCurrentPage !== page;
if (!articleApiStatus || isNewPage) {
getArticleList(page, '')
}
}
const getArticleList = async (page, searchkey) => {
const requestBody = {
page: page - 1, searchkey
}
await onArticleSearchPost(requestBody).then(articleresult => {
setArticleList(articleresult);
}).catch(err …