小编dev*_*mat的帖子
理解：警告：不能给函数组件提供引用
我知道 refs 用于直接访问 DOM 元素而不改变状态。我读到无法为功能组件提供引用，因为它们没有状态。
Refs 不能附加到函数组件。虽然，我们可以定义 refs 并将它们附加到 DOM 元素或类组件。底线是——函数组件没有实例，所以你不能引用它们。
取自：https : //blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/
我还是不明白。
我正在使用TooltipAnt Design ( https://ant.design/components/tooltip/ ) 中的Button组件、组件和自定义CircleButton组件。
鉴于以下 JSX：
<Tooltip placement="left" title={"Lock slot"}>
<CircleButton onClick={() => execute(client.close)} icon={<LockOutlined />} disabled={loading} />
</Tooltip>
还有我的 CircleButton 组件。像这样使用，它会产生警告。
const CircleButton = (props) => // gives the warning
<Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />
警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？
请注意，尽管有警告，但一切都按预期工作。
如果我按如下方式编辑它，它会正常工作，为什么？
const CircleButton = forwardRef((props, ref) => // doesn't give …推荐指数
解决办法
查看次数
CKEditor 5 显示视频元素，但插入 div 中的纯 HTML 不显示该元素
我正在创建一个课程编辑器。用户可以编辑内容（文本、视频、链接、图像等）或查看最终结果（渲染的 html）。
\n\n编辑器工作正常，但是当我显示渲染的 html 时，链接的 YouTube 视频不可见。
\n\n这是编辑器部分，您可以看到链接的视频可见：
\n\n
这是“渲染”版本；视频丢失（看起来它没有渲染标签figure和oembed标签，但为什么？）：
html 是：
\n\n<h2>This is the header of this section</h2>\n<figure class="media">\n<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>\n</figure>\n\n<p>Please let the student introduce himself.</p><blockquote><p> \xe2\x80\x98I was in no mood for talk and I was unpleasantly surprised to find Judy Poovey brushing her teeth at the sink. [\xe2\x80\xa6]<br>\xe2\x80\x98Hi, Richard,\xe2\x80\x99 she said, and spit out a mouthful of toothpaste. She was wearing cut-off jeans that had bizarre, frantic designs drawn …推荐指数
解决办法
查看次数
ReactJS 钩子：如何在两个不同的 .js 文件中使用上下文？
我使用 React.createContext() 和 React.useContext() 在同一个 .js 文件中有两个组件。现在我想在另一个 .js 文件中移动 Menu 组件，但是我在使用相同的上下文时遇到了问题。这是代码：
const ManagerContext = React.createContext(null);
export default function LessonManager() {
const [title, setTitle] = React.useState('SomeOtherTitle');
const [editing, toggleEditor] = React.useState(false);
const value = React.useMemo(() => {
return {
title,
setTitle,
editing,
toggleEditor,
log: (t) => console.log(t)
}
}, [title, editing]);
return (
<ManagerContext.Provider value={value}>
<div className='box-default expand'>
<div className='handle' style={{display: 'flex', justifyContent: 'center', width: '100%', cursor: 'grab'}}>
<LessonMenu/>
</div>
</div>
</ManagerContext.Provider>
)
}
export function LessonMenu() {
const state = …推荐指数
解决办法
查看次数
为什么图和 oembed 标签不起作用？
鉴于以下情况html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
为什么页面不显示 youtube 视频？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
正文代码是由CKEditor（我刚刚从标签中删除了“媒体”类figure）生成的。您可以在此处查看我的原始帖子链接
推荐指数
解决办法
查看次数
如何在不丢失索引的情况下过滤数组？
我有两个非常长的数组包含"图片名称"和"图片文件".第一个表示图片的实际名称,而第二个表示文件名.例如:
picturenames[0] = '0 - zero';
picturenames[1] = '1 - one';
picturenames[2] = '1 o\'clock';
...
picturefiles[0] = 'numbers-zero.jpg';
picturefiles[1] = 'numbers-one.jpg';
picturefiles[2] = 'time-1.jpg';
...
我用几种语言在每个数组中有大约1000个项目(图片文件总是相同的).我正在从以前的应用程序"回收"这些数组,以节省一些时间,避免重新编写所有内容.
理想的功能:在文本框中使用用户输入我想过滤picturenames数组,然后显示相应的picturefiles图像.
我面临的问题:当我过滤picturenames数组时,我丢失了索引,我无法"到达"图片文件名.
这是我用来过滤picturenames数组的代码.
var matches = picturenames.filter(function(windowValue){
if(windowValue) {
return windowValue.indexOf(textToFindLower) >= 0;
}
});
最好的方法是什么？
更新:Ahmed提出的解决方案是最好的解决方案,但由于时间原因和可忽略的性能问题,我只是使用for循环来搜索数组,如下所示:
var matchesCounter = new Array();
for (i = 0; i < picturenames.length; i++) {
if (picturenames[i].indexOf(textToFindLower) >= 0) {
matchesCounter.push(i);
}
}
console.log(matchesCounter);
for (i …推荐指数
解决办法
查看次数
如何使用 ReactJS 在 CKEditor 5 中配置上传适配器？
编辑：我在 Github 上打开了一个问题：https : //github.com/ckeditor/ckeditor5-editor-classic/issues/98
我花了大约 2 天的时间试图弄清楚这一点。
编辑器工作正常，但是当我尝试添加图像时出现错误：
filerepository-no-upload-adapter：未定义上传适配器。阅读更多：https : //ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
我浏览了几个小时的文档，但我找不到解决方案。您可以在我尝试遵循的文档中看到以下步骤。
这是我的代码：
import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
class EditorComponent extends Component {
constructor(props) {
super(props);
this.state = {
id: props.id,
content: props.content,
handleWYSIWYGInput: props.handleWYSIWYGInput,
editor: ClassicEditor
}
}
render() {
return (
<div className="Editor-content">
<CKEditor
editor={ this.state.editor }
data={this.state.content}
onInit={ editor => {
// You can store the "editor" and use …推荐指数
解决办法
查看次数
JavaScript：比较字符和重音字符
我正在创建一个简单的像游戏一样的吊人。用户可以输入一个“秘密句子”，然后玩家必须通过一个一个选择的字母来猜测它。
由于此游戏将在多种语言中使用，如果玩家选择非重音字符，我想解决所有重音字符。例如：
IL CANE È BELLO.
如果玩家选择元音“e”，则只会解析没有重音的元音（游戏用 === 比较字符）。相反，我希望游戏能自动识别所有带重音或不带重音的字符（è、é、e...）
我要折磨自己写一个函数来检查每个带重音的字符，但我想知道是否有更简单的方法。
这是我的函数到目前为止的样子（我刚刚添加了 è 重音元音）
function isAccentedVowel(chosenChar, currentChar) {
console.log('The user selected this char: ' + chosenChar)
console.log('I\'m comparing it to this char: ' + currentChar)
switch (chosenChar) {
case 'E':
if (currentChar === 'È') return true;
}
}
注意：密句和每个字符都是大写的
推荐指数
解决办法
查看次数
ReactJS 和 Material UI TreeView：我可以使用 JSON/对象数组来填充 TreeView 吗？
我有一个包含需要填充<TreeView>组件的值的对象数组：
const treeItems = [
{
id: uuidv4(),
name: 'English',
children: [
{
id: uuidv4(),
name: 'Spring',
children: []
}
]
},
{
id: uuidv4(),
name: 'Italian',
children: [
{
id: uuidv4(),
name: 'Level A',
children: []
}
]
}
]
我想用它作为道具来自动填充TreeViewwith TreeItems。
目前我有一个函数可以在你传递数组时呈现孩子，但是检查文档（https://material-ui.com/api/tree-view/）我注意到有一个孩子的道具。
子节点组件的内容。
是否可以使用 JSON/对象数组来填充 TreeView？
推荐指数
解决办法
查看次数
NodeJS + ExpressJS 管理 mysql DB 连接的正确方法
我正在使用 ReactJS / NodeJS + ExpressJS 开发一个应用程序。
我试图了解处理数据库连接的最佳方法是什么。这段代码有效，但似乎它不断增加连接数，我认为这不好，但你可能会启发我这一点。
当我刚启动 mysql 服务器（没有运行我的应用程序）时，连接数已经是 60，这些是什么？
MariaDB [(none)]> show status like 'Conn%';
+-----------------------------------+-------+
| Variable_name | Value |
+-----------------------------------+-------+
| Connection_errors_accept | 0 |
| Connection_errors_internal | 0 |
| Connection_errors_max_connections | 0 |
| Connection_errors_peer_address | 0 |
| Connection_errors_select | 0 |
| Connection_errors_tcpwrap | 0 |
| Connections | 60 |
+-----------------------------------+-------+
7 rows in set (0.001 sec)
然后，一旦我运行我的应用程序，连接数就会增加到 64：
MariaDB [(none)]> show status like 'Conn%';
+-----------------------------------+-------+
| Variable_name …推荐指数
解决办法
查看次数
Material UI 全局 css 变量
我想声明一些我将在我的组件中重用的 css 变量。这是你如何用普通的 css 来做到这一点：
:root {
--box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3);
}
然后将按如下方式使用：
.my-class {
box-shadow: var(--box-shadow);
}
如何使用 useStyles 实现相同的效果？我尝试了以下无济于事：
const theme = createMuiTheme({
shadowing: {
boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
}
});
我的主应用程序包含在
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
我尝试在我的组件中使用它：
const useStyles = makeStyles(theme => ({
workImage: {
boxShadow: theme.shadowing,
},
}));
但它不起作用。
推荐指数
解决办法
查看次数