小编She*_*aff的帖子

有条件地调用 React hook

从react官方文档我们知道“React依赖于Hooks的调用顺序”。那么,如果我想有条件地调用它,那么为钩子“保留”一个位置有什么问题吗?

function Component({flag, depA, depB}) {

  if (flag) {
    // just "reserving a spot"
    useEffect(() => {}, [null, null])
  } else {
    useEffect(() => {
      // ... actual hook
    }, [depA, depB])
  }

  return <></>
}
Run Code Online (Sandbox Code Playgroud)

如果这有效,它也适用于吗useCallbackuseLayoutEffectuseMemouseImperativeHandle

我已经测试了所有这些,并且在更复杂的上下文中,即使 linter 抱怨,它似乎也能工作。我错过了什么吗?

PS:如果像这样看起来有点没用,那是因为最终目标是让钩子的主要部分延迟加载import(),在导入被触发和解决之前,只需为钩子保留位置即可。

reactjs react-hooks

44
推荐指数
3
解决办法
8万
查看次数

使用 `overflow-wrap: break-word` 自动列宽

我有一个包含 3 列的 HTML 表 - ID、时间戳和数据。ID 和时间戳非常窄,数据可能非常大,有时它没有换行符,以避免我设置的水平滚动条overflow-wrap: break-word。为了使它工作,我需要将我table-layoutfixed.

虽然它有效,但我不喜欢所有列现在都具有相等的宽度。我可以将前两列大小设置为某个固定宽度,但我希望它们适合内容。如何强制前 2 列调整其宽度,第三列占用剩余空间?

这是我的代码示例:

<table style="width: 100%; table-layout: fixed; overflow-wrap: break-word">
  <tr>
    <th>ID</th>
    <th>Time</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>0</td>
    <td>10:11</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>1</td>
    <td>10:12</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10:13</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped</td>
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

基本上我需要的是以某种方式强制前 2 列忽略table-layout: fixed或强制overflow-wrap: break-word没有它的工作。

html css

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

代理事件目标上的 addEventListener

我正在尝试创建一个基本上既是 aProxy又是 an 的对象EventTarget对象。目标是能够订阅对此对象所做的任何更改。

这是我定义这个对象的方式:

const target = new EventTarget()
const state = new Proxy(target, { 
    set: (obj, key, value) => { 
        Reflect.set(obj, key, value)
        obj.dispatchEvent(new CustomEvent('change', {detail: {key, value}}))
    }, 
    deleteProperty: (obj, key) => { 
        Reflect.deleteProperty(obj, key) 
        obj.dispatchEvent(new CustomEvent('change', {detail: {key, value: undefined}})) 
    } 
})
Run Code Online (Sandbox Code Playgroud)

此时我希望能够打电话,state.addEventListener('change', console.log)但这给了我一个错误:

未捕获的类型错误:非法调用

所以这是有效的:

target.addEventListener('change', console.log)
state.foo = 'bar'
// logs the event
Run Code Online (Sandbox Code Playgroud)

但正如我所说,我希望有一个统一的对象,它既可以是目标(可以使用 监听addEventListener)又可以是值的存储(负责在修改时分派事件的代理对象)。到目前为止,这种方法只有在你随身携带并且 ……的target情况下才有效。state

知道为什么我不能通过 拨打addEventListener电话吗Proxy? …

javascript proxy addeventlistener javascript-objects dom-events

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

单表达式箭头函数中的 void

我正在研究优秀的老void运营商的用例。我看到提到的一个是为了防止箭头函数“泄漏”它们的结果,因为它们经常被编写(见fn0下面的例子)。

因此,论点是void在您实际上不需要结果的情况下使用来防止此类泄漏(请参阅 参考资料fn2),但我真的不明白仅将语句括在括号中(请参阅 参考资料fn1)有什么区别。

function doSomething(number) { return number + 1 }

const fn0 = () => doSomething(1)
const fn1 = () => { doSomething(1) }
const fn2 = () => void doSomething(1)

console.log(fn0()) // 2
console.log(fn1()) // undefined
console.log(fn2()) // undefined
Run Code Online (Sandbox Code Playgroud)

有人可以向我解释fn1和之间的区别fn2吗?它是否在“引擎盖下”做了一些不同的事情?这只是约定/可读性的问题吗?

javascript

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

打开磁铁链接而不会失去焦点

有没有一种方法在javascript(或其他)处理磁铁链接,而浏览器没有失去焦点?这有点像在后台打开标签而不离开当前页面.

javascript browser magnet-uri

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

用 Bash 正则表达式匹配词边界

我想在 bash 中匹配以下表达式:

^.*(\b((720p)|(1080p)|(((br)|(hd)|(bd)|(web)|(dvd))rip)|((x|h)264)|(DVDscr)|(xvid)|(hdtv)|(ac3)|(s[0-9]{2}e[0-9]{2})|(avi)|(mp4)|(mkv)|(eztv)|(YIFY))\b).*$

我真的只想知道被测试的字符串中的一个词是否是这个正则表达式中描述的词之一(720p, 1080p, brrip, ...)。而且这个词的边界似乎有问题。

我使用的测试是[[ $name =~ $re ]] && echo "yes"where$name是任何字符串,$re是我的正则表达式。

我错过了什么?

regex bash word-boundary

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