小编Dar*_*ght的帖子

在 onClick 处理程序中传递参数的最有效方法

我正在使用内联箭头函数来更改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)

javascript reactjs

12
推荐指数
2
解决办法
1302
查看次数

未捕获的TypeError:无法读取未定义的属性"注入"

升级后对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"

javascript reactjs material-ui react-16

8
推荐指数
1
解决办法
5694
查看次数

如何为socket io和graphql建立连接?

我对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)

node.js socket.io graphql

6
推荐指数
1
解决办法
5413
查看次数

如何获取影子根中的元素?

我的 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)

提前致谢!!!

javascript dom shadow-dom reactjs microblink

5
推荐指数
1
解决办法
8574
查看次数

如何从对象数组中获取键和子键?

我有以下对象数组。

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)

但无法访问内部的。

请帮助...谢谢!

javascript arrays dictionary object

5
推荐指数
1
解决办法
147
查看次数

TypeError:action $ .ofType(...)。mergeMap不是一个函数

我是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)

reactjs redux-thunk react-redux redux-observable

4
推荐指数
1
解决办法
2631
查看次数

javascript中带有类的异步函数

我在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)

javascript asynchronous node.js async-await ecmascript-2017

3
推荐指数
1
解决办法
4146
查看次数

如何使用lodash处理空值

这是简单的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中有什么功能可以解决这个问题?

谢谢!!!

javascript lodash

2
推荐指数
2
解决办法
2185
查看次数

是否可以在异步函数之外使用 await

这是我在 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呢?

javascript asynchronous node.js async-await ecmascript-2017

1
推荐指数
1
解决办法
9300
查看次数

如何使用nodemailer发送pdf附件?

我有一个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)

但这是行不通的。谁能建议我如何做到这一点?

javascript pdf email node.js nodemailer

1
推荐指数
1
解决办法
4210
查看次数

等待不等待解决承诺

这是我的小twilio函数/类返回promise,我在另一个文件中导入.我得到了,errres在这里以承诺回报它

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 asynchronous node.js async-await

0
推荐指数
1
解决办法
140
查看次数