我正在使用内联箭头函数来更改onClickReact 组件中某些 div的处理程序,但我知道这在性能方面不是一个好方法。
客观地说,设置onClick需要参数的处理程序的最有效方法是什么?这是我尝试过的:
1.内联箭头函数
changeRoute (routeName) {
console.log(routeName)
}
render() {
return (
<>
<div onClick={() => this.changeRoute("page1")}>1</div>
<div onClick={() => this.changeRoute("page2")}>2</div>
</>
)
}
Run Code Online (Sandbox Code Playgroud)
2.如果我使用构造函数绑定,那么我如何传递道具?
constructor() {
super(props)
this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
console.log(routeName)
}
render() {
return (
<>
<div onClick={this.changeRoute}>1</div>
<div onClick={this.changeRoute}>2</div>
</>
)
}
Run Code Online (Sandbox Code Playgroud)
3.如果我删除箭头函数,则渲染本身调用的函数
changeRoute (routeName) {
console.log(routeName)
}
render() {
return (
<>
<div onClick={this.changeRoute("page1")}>1</div>
<div onClick={this.changeRoute("page2")}>2</div>
</>
)
}
Run Code Online (Sandbox Code Playgroud)
4.如果我使用内联绑定,那么它的性能也不是最好的
changeRoute (routeName) {
console.log(routeName)
}
render() …Run Code Online (Sandbox Code Playgroud) 升级后对16.x的反应后出现以下错误
Uncaught TypeError: Cannot read property 'injection' of undefined
at injectTapEventPlugin (injectTapEventPlugin.js:23)
at eval (index.js:53)
at Object.<anonymous> (bundle.js:1363)
at __webpack_require__ (bundle.js:556)
at fn (bundle.js:87)
at eval (multi_main:3)
at Object.<anonymous> (bundle.js:589)
at __webpack_require__ (bundle.js:556)
at bundle.js:579
at bundle.js:582
Run Code Online (Sandbox Code Playgroud)
请帮忙!!!
反应版本 - > "^16.4.2"
react-tap-event-plugin - >"^3.0.3"
我对graphql很陌生……这是我的服务器文件……我无法建立socket io连接……当我在socket io内执行控制台时,它不会进入函数内部……我想我我在这里做错了什么const io = require('socket.io')(server)......
var express = require('express');
var graphqlHTTP = require('express-graphql');
var {schema} = require('../graphql/schema');
var {root} = require('../graphql/resolver');
const EventEmitter = require('events');
var app = express();
var server = require('http').Server(app);
const event = new EventEmitter()
const io = require('socket.io')(server)
event.on('event', function(action) {
console.log(action)
io.on('connection', function (socket) {
console.log('socket')
socket.emit('action', action)
})
})
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
formatError(err) {
return {
message: err.message
};
}
}));
app.use('/voyager', middleware({ endpointUrl: '/graphql' })); …Run Code Online (Sandbox Code Playgroud) 我的 html 内容位于影子根中,这些内容都是通过 microblink SDK 动态生成的。
我需要向其添加事件监听器,#fileBtn因此每当单击它时我都需要执行某些操作。但由于它是影子根,我无法访问 DOM 属性。我也为此使用reactjs。
<microblink-ui-web tabs="true" autoscroll="true" style="height: 319.562px;">
#shadow-root (open)
<div class="container root" max-width="500px 600px 630px">
<div class="container main">
<div class="container intro dropzone active">
<div class="flex-vertical">
<p class="intro-label">
<slot name="labels.chooseInputMethod">Choose input method</slot>
</p>
<div class="flex-horizontal">
<input
type="file"
accept="image/png,image/gif,image/bmp,image/jpeg,image/x-png,image/vnd.wap.wbmp"
id="file"
/>
<button type="button" class="intro-button" id="fileBtn">
</button>
<button type="button" class="intro-button" id="cameraLocalBtn">
</button>
</div>
</div>
</div>
</div>
</div
></microblink-ui-web>
Run Code Online (Sandbox Code Playgroud)
提前致谢!!!
我有以下对象数组。
const array = [{
field1: "val1",
field2: "val2",
field3: {
field1: "val1",
field2: "val2"
}
},
{
field1: "val1",
field2: "val2",
field3: {
field1: "val1"
}
}]
Run Code Online (Sandbox Code Playgroud)
我需要低于输出
const output = [{
key: "field1",
subkeys: []
},
{
key: "field2",
subkeys: []
},
{
key: "field3",
subkeys: ["field1", "field2"]
}]
Run Code Online (Sandbox Code Playgroud)
我可以使用这个获得顶级字段
const keys = array.map(x => Object.keys(x)[0]);
Run Code Online (Sandbox Code Playgroud)
但无法访问内部的。
请帮助...谢谢!
我是ReactJS的新手,正在尝试将redux与现有项目集成。
这是我index.js存储的文件
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import user, { userEpic } from './user/duck'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
userEpic
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware(rootEpic)
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const …Run Code Online (Sandbox Code Playgroud) 我在nodejs中创建了一个类
class ApnService {
sendNotification(deviceType, deviceToken, msg, type, id) {
try {
const note = await apnProvider.send(note, deviceToken)
console.log(note)
} catch (err) {
console.log(err)
}
}
}
export default ApnService
Run Code Online (Sandbox Code Playgroud)
我需要做的是将上述函数转换为async。但是当我使用下面的语法时,它会抛出错误
SyntaxError: src/services/apn.js: Unexpected token (43:19)
41 | }
42 |
> 43 | sendNotification = async(deviceType, deviceToken, msg, type, id) => {
|
^
Run Code Online (Sandbox Code Playgroud)
下面是语法
class ApnService {
sendNotification = async(deviceType, deviceToken, msg, type, id) => {
try {
const note = await apnProvider.send(note, deviceToken)
console.log(note)
} …Run Code Online (Sandbox Code Playgroud) 这是简单的json
{
home: 68
id: 1
name: "RL Conference Room"
nickname: null
setpoint: 32.34
sleep: 58
}
Run Code Online (Sandbox Code Playgroud)
当我得到空键时,此lodash函数有效
_.get(room, 'keyName', 'whenKeyNotFound')
Run Code Online (Sandbox Code Playgroud)
但是正如您在上面看到的那样,我在中获得了空值,nickname因此我想将其替换为,name但这是行不通的。
_.get(room, 'nickname', 'name')
Run Code Online (Sandbox Code Playgroud)
lodash中有什么功能可以解决这个问题?
谢谢!!!
这是我在 nodejs 中的简单功能
const myFunction = async() => {
const exercises = await Exercise.find({ workoutId })
return exercises
}
const value = await myFunction()
Run Code Online (Sandbox Code Playgroud)
但是当我await在异步函数之外执行它时会引发错误
await is a reserved word
Run Code Online (Sandbox Code Playgroud)
现在我如何等待异步函数之外的值?我需要使用回调.then吗?那有什么用async and await呢?
我有一个js包含 html 内容的文件。
.js 文件
const data = (data) => {
return `<h1> This is my pdf data </h1>`
}
export default data
Run Code Online (Sandbox Code Playgroud)
这是我的nodemailer功能
import template from "js_file_path"
const body = template(data);
const mail = mailcomposer({
from: "XXXX",
to: "XXXX",
subject: `Subject`,
attachments: [
{
filename: "Receipt.pdf",
content: body
}
]
});
// mail.build()
Run Code Online (Sandbox Code Playgroud)
但这是行不通的。谁能建议我如何做到这一点?
这是我的小twilio函数/类返回promise,我在另一个文件中导入.我得到了,err并res在这里以承诺回报它
class TwilioService {
sendSms(to, message) {
return this.twilio.sendMessage(sms,(err,res) => {
return new Promise((resolve, reject) => {
if (err) {
console.log(err)
return resolve(res)
} else {
console.log(res, 'ppppppppppppppppp')
return reject(res)
}
})
})
}
}
Run Code Online (Sandbox Code Playgroud)
现在这是我使用该功能的功能.
但是当我这样做时,我console.log(sendSms)在控制台中得到了未定义,即使我从twilio函数返回了promise.我在这做错了什么.
import Twilio from '../../services/twilio'
const twilio = new Twilio()
const handler = async(request, reply) => {
try {
const sendSms = await twilio.sendSms(`+91${mobile}`, `Welcome to App. User ${verificationCode} as your signup OTP.`)
console.log(sendSms, 'oooooooooooooooo')
} catch(err) { …Run Code Online (Sandbox Code Playgroud) javascript ×9
node.js ×5
reactjs ×4
async-await ×3
asynchronous ×3
arrays ×1
dictionary ×1
dom ×1
email ×1
graphql ×1
lodash ×1
material-ui ×1
microblink ×1
nodemailer ×1
object ×1
pdf ×1
react-16 ×1
react-redux ×1
redux-thunk ×1
shadow-dom ×1
socket.io ×1