我有一个我想在React中编写的函数.在我的课堂上,我有一个状态对象fields,如下所示:
this.state = {
step: 1,
fields: {
type: '',
name: '',
subtype: '',
team: '',
agreement: ''
}
};
Run Code Online (Sandbox Code Playgroud)
我有各种功能,使用immutability helper通常看起来像这样的键来分配这些键:
assignType(attribute) {
var temp = update(this.state.fields, {
type: {$set: attribute}
});
this.setState({
fields: temp
});
}
Run Code Online (Sandbox Code Playgroud)
我会喜欢做的是使用一个函数,更通用的,做这样的事情:
assignAttribute(field, attribute) {
var temp = update(this.state.fields, {
field: {$set: attribute}
});
this.setState({
fields: temp
});
}
Run Code Online (Sandbox Code Playgroud)
但是,这不起作用.使用变量键可以做什么immutability-helper?
我一直在研究React应用程序,并且已经达到了我需要Redux来处理它的某些方面的地步.
在阅读了一堆教程后,我完全坚持如何让我的"更聪明"的组件"笨拙"并将功能转移到我的动作和减速器中.
因此,例如,应用程序的一个方面更多是待办事项列表样式.
我的一个课程开头是这样的:
export default class ItemList extends React.Component {
constructor() {
super();
this.state = { items: [],
completed: [],
};
this.addItem = this.addItem.bind(this);
this.completeItem = this.completeItem.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
addItem(e) {
var i = this.state.items;
i.push({
text: this._inputElement.value,
paused: false,
key: Date.now()
});
this.setState({ items: i });
e.preventDefault();
this._inputElement.value = '';
this._inputElement.focus();
}
completeItem(e) {
this.deleteItem(e);
var c = this.state.completed;
c.push({
text: e.target.parentNode.parentNode.getElementsByClassName('item-name')[0].innerHTML,
paused: false,
key: Date.now()
});
this.setState({ completed: c });
}
deleteItem(e) {
var i …Run Code Online (Sandbox Code Playgroud) 给定一个<img>元素,是否可以仅使用CSS对图像进行像素化和/或不使用画布?我已经看过像清晰的边缘特征(但这只是用于缩放的图像)和许多画布选项,但我希望有更好的方法.
我有一组突变触发某些类型的弹出窗口的本地状态.它们通常设置如下:
openDialog: (_, variables, { cache }) => {
const data = {
popups: {
...popups,
dialog: {
id: 'dialog',
__typename: 'Dialog',
type: variables.type
}
}
};
cache.writeData({
data: data
});
return null;
}
Run Code Online (Sandbox Code Playgroud)
我传入的默认值如下:
const defaults = {
popups: {
__typename: TYPENAMES.POPUPS,
id,
message: null,
modal: null,
menu: null,
dialog: null
}
};
Run Code Online (Sandbox Code Playgroud)
它们在我的React代码中的使用方式是使用Mutation包装器组件,如下所示:
const OPEN_ALERT_FORM = gql`
mutation AlertOpenDialog($type: String!) {
openDialog(type: $type) @client
}
`;
class Alert extends Component {
render() {
return (
<Mutation mutation={OPEN_ALERT_FORM} variables={{ …Run Code Online (Sandbox Code Playgroud) 我正在努力寻找有关在 Electron 中使用自定义警报声音正确发出通知的信息。我们如何建议我们在主进程和渲染进程中都这样做?
这是我在主进程中放入的一个示例尝试(我知道路径不是这里的问题),它无论如何都会播放默认声音:
let exNotification = new Notification({
title: "Example!",
body: "Here's an example!",
silent: false,
sound: path.join(
app.getAppPath(), "assets/ping.mp3"),
});
exNotification.show();
Run Code Online (Sandbox Code Playgroud)
...即使这确实有效,也仅限于 MacOS。
似乎有各种各样的软件包,但我找不到任何明确的东西来简单说明跨平台工作的“正确”方法是什么。
有很多黑客感觉的建议,例如“使通知静音并使用不同的包同时播放声音”,或者“使用几年来没有更新的第 3 方通知包”,以及我担心这些选择的长期可行性。
有什么建议吗?像大型 Electron 应用程序(如 Slack 或 Discord)那样使用自定义声音进行跨平台通知的“正确”方式是什么?像 Tauri 或其他一些网络应用程序包装器这样的东西是否可以更好地解决我不知道的问题?
我刚刚将项目的React版本升级到13.3并且setProps()不再有效.我在这个摩卡测试中使用它,我不知道如何重写它.我有什么选择?
it('reloads search results when props change ', function() {
var loadResultsSpy = sinon.spy(searchView, 'loadSearchResults');
var newProps = {searchBy: 'foo', searchTerm: 'bar'};
searchView.setProps(newProps);
expect(loadResultsSpy.calledWith(newProps.searchBy, newProps.searchTerm)).toBe(true);
});
Run Code Online (Sandbox Code Playgroud) 当我尝试在构造函数,componentWillMount或componentDidMount中使用Moment.js中的日期时,我收到错误:
Uncaught TypeError: _moment2.default.date is not a function
Run Code Online (Sandbox Code Playgroud)
我没有在npm之外使用Webpack或任何特定的构建工具.这是我的相关代码:
import React from 'react';
import Moment from 'moment';
export default class Date extends React.Component {
constructor() {
super();
this.state = { day: '',
month: '',
year: '',
weekday: ''
};
}
componentDidMount() {
this.setDate();
}
setDate() {
this.state.day = Moment.date();
this.state.month = Moment.format('MMM');
this.state.year = Moment.year();
this.state.weekday = Moment.format('dddd');
}
Run Code Online (Sandbox Code Playgroud)
这是因为Moment在渲染组件时还没有完全加载,或者是其他什么东西?我怎样才能解决这个问题?
当我在render()函数中调用Moment时,我没有收到此错误.但是,我需要状态中的日期信息,以便我可以根据日期更新其他应用程序组件.
我有一个 Electron + React 应用程序,几年来没有更新过,最初使用这些包:
"@rescripts/cli": "^0.0.13",
"@rescripts/rescript-env": "^0.0.11",
"electron": "^7.1.10",
"electron-builder": "^22.3.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0",
Run Code Online (Sandbox Code Playgroud)
现在我希望它使用:
"@rescripts/cli": "^0.0.13",
"@rescripts/rescript-env": "^0.0.11",
"electron": "^21.1.1",
"electron-builder": "^23.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
Run Code Online (Sandbox Code Playgroud)
当我运行我的应用程序时,Electron 窗口/菜单/等会完美加载,但应用程序的实际 React 部分却不会。React 应用程序本身的代码此时并不真正相关,因为它甚至不会渲染基本的“hello world”。
我已经更新(或注释掉)了几乎所有已弃用的功能,但我认为rescripts/Create React App 的 webpack 部分导致了错误Uncaught ReferenceError: global is not defined.
global此时该变量在我的代码中不存在,但我的.webpack.config.js有:
module.exports = config => {
config.target = "electron-renderer";
return config;
};
Run Code Online (Sandbox Code Playgroud)
我的.rescriptsrc.js有:
module.exports = [require.resolve("./.webpack.config.js")];
Run Code Online (Sandbox Code Playgroud)
我认为这些是罪魁祸首,因为当我点击错误时,它指向实际不在我的代码库中的已编译的 webpack 文件。
我在 …
我有以下网站:
http://cassidoo.public.iastate.edu/
我在菜单中使用JQuery UI选项卡.加载页面时,选项卡中会有一段内容.
我已尝试从ui-tabs-hide诀窍到隐藏Javascript中的所有内容.有缺点我不知道吗?我该怎么办?
谢谢您的帮助!
我有几个结构如下的JSON文件(让我们称之为info.json):
{
'data': {
'title': 'Job',
'company': 'Company',
'past': [
'fulltime': [
'Former Company'
],
'intern': [
'Women & IT',
'Priority 5'
]
],
'hobbies': [
'playing guitar',
'singing karaoke',
'playing Minecraft',
]
}
}
Run Code Online (Sandbox Code Playgroud)
在一个单独的JavaScript文件中,我有一个如下所示的函数:
function getJSONInfo() {
fetch('info.json').then(function(response) {
return response.json();
}).then(function(j) {
console.log(j);
});
}
Run Code Online (Sandbox Code Playgroud)
我跑的时候一直收到这个错误getJSONInfo():
Uncaught (in promise) SyntaxError: Unexpected token '
Run Code Online (Sandbox Code Playgroud)
我错过了什么?我在'任何地方都没有流浪,所以我不确定是什么问题.
javascript ×9
reactjs ×6
electron ×2
json ×2
apollo ×1
css ×1
fetch ×1
graphql ×1
html5 ×1
image ×1
immutability ×1
jquery ×1
jquery-tabs ×1
jquery-ui ×1
mocha.js ×1
momentjs ×1
react-apollo ×1
react-redux ×1
redux ×1
webpack ×1