小编Gas*_*ass的帖子

我有一个道具从父组件传递到子组件，该组件根据用户的输入而变化。

当子组件渲染之前该 prop 发生变化时，我想在子组件中触发数据获取。我该怎么做？

我通过使用尝试了以下方式useEffects(()=>{},[props.a, props.b])，但总是在渲染后调用。请帮忙！

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function parentComponent() {
  const [inputs, setInputs] = useState({ a: "", b: "" });
  return (
    <>
      <input
        value={inputs.a}
        onChange={(event) => {
          const value = event.target.value;
          setInputs((prevState) => {
            return { ...prevState, a: value };
          });
        }}
      />
      <input
        value={inputs.b}
        onChange={(event) => {
          const value = event.target.value;
          setInputs((prevState) => {
            return { ...prevState, b: value };
          });
        }}
      />
      <ChildComponent a={inputs.a} …

我想通过在 Vue 组件中观察 Vuex 状态值来检测它的变化。我目前正在使用 Vue 3 和组合 API。我尝试过以下方法：

setup(props) {
   const store = useStore();

   watch(store.getters.myvalue, function() {
      console.log('value changes detected');
   });

   return {
      myvalue: computed(() => store.getters.myvalue)
   }
},

但改变console.log()时不会被调用。myvalue

我根本不是反应方面的专家，但从我可以看到，如果我导入一些CSS表，这些将适用于我的所有应用程序。如果我想将 React 用于多页面应用程序，如何为每个页面定义 css 表？

我的文件结构

第1页

import React, { Component } from "react";
import "./style.css";

export default class Page1 extends Component {
  render() {
    return (
      <div>
        <button>with css</button>
      </div>
    );
  }
}

第2页

import React, { Component } from "react";

export default class Page2 extends Component {
  render() {
    return (
      <div>
        <button>no css</button>
      </div>
    );
  }
}

样式.css

button {
  background: green;
}

此样式只能应用于第一页，但也适用于第二页。我该如何解决这个问题？

我正在使用react-router，这意味着我将路由存储在app.tsx文件中。

我有需要重定向到外部 url 的卡片组件onClick。

所以我的问题是如何onClick使用外部 url 示例重定向卡组件：www.test.com并为该 url 提供两个查询字符串a=xxx和b=xxx

我正在尝试从表单中获取数据，其中某些字段是动态的，因此它们的名称遵循以 1 或 2 结尾的星期几的模式。

在中onChange，我发送正在编辑的组件的名称，以便程序知道正在编辑什么输入，但是当我使用通过参数发送的名称时，它useState不会将其检测为变量，而是将其检测为普通字符串。

const [horas, setHoras] = useState({});  

const handleHoras = (e: any, nomb: string) => {
        setHoras({
            ...horas,
            nomb: e.target.value
        })
    }

我尝试将状态声明为数组（如下所示），但变量不会覆盖自身，而是在每次值更改时添加具有相同名称的变量。

    const handleHoras = (e: any, nomb: any) => {
        setHoras(
            [
                ...horas,
                { 'name': nomb, 'value': e.target.value }
            ]
        )
    }

我想I_have_a_string分成I_have_a和string。

Kotlin 中是否有内置函数可以从末尾拆分？以下是我现在正在做的事情：

val words = myString.split("_")
val first = words.dropLast(1).joinToString("_")
val second = words.last()

试图找出如何将按钮重置回“未触摸”状态。我使用按钮作为：

    <div id="service-control-buttons" data-role="controlgroup" data-type="horizontal">
        <a href="#" id="service-previous" data-role="button" data-icon="arrow-l">Prev</a>
        <a href="#" id="service-next" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
    </div>

当我点击（在 iPad 上）“下一个”或“上一个”时，它会运行我编写的 JavaScript 函数，然后按钮保持永久活动、悬停或聚焦（不确定状态）。

我的目标：在 javascript 函数运行后，我想将按钮重置回非活动、非悬停或非聚焦状态。当然，这不会发生在非触摸屏鼠标点击上。

我试过了：

$(another-selecter).focus();
$(another-selecter).click();
$('#service-next').blur();

还

$('#service-next').css('background-color', 'original-color') 

有效，但当然，这就是突出显示的全部结束，我不希望这样。我不想手动设置 css，因为我使用的主题将来可能会发生变化，并且希望尽可能避免黑客攻击。

对我来说似乎很直观，但事实证明事情并不是这样的！目标是删除传递的元素（如果存在）并返回其余元素。我知道有很多方法可以实现这一目标 - 包括filter：const rest = selection.filter(i => i !== item)- 但是，正如我所说，我认为这种方法会是一件事 - 因为它是为了objects/key:value pairs.

if (selection.includes(item)) {
  // remove if available
  const [item, ...rest] = selection;
  
  setSelection(rest)
} else {
  // ...
}

工作方式是将的元素destructuring分配给 item 并将其余项目分配给- 一个数组。这是正确的——至少从我的理解来看，事情就是这样运作的。firstselectionrest

是否可以使用解构赋值从数组中提取特定项目并将其余元素解压到变量中？

对 React 来说相对较新，遇到了一些我不确定答案的问题。如果有条件操作，useEffect与仅使用 if 语句有区别吗？

function Items() {
    [setItemAdded, itemAdded] = useState(false);
    
    if (itemAdded) {
      saveData();
      itemAdded = false;
    }

}

与

     useEffect(() => {
         if (itemAdded) {
             saveData();
             itemAdded = false;
         }, [itemAdded]);
          

根据我的理解，当状态更新时itemAdded，它将重新渲染将调用条件语句并执行代码的组件。

在第二种情况下，由于是一个依赖项，因此每当更改itemAdded时都会调用它。itemAdded对我来说，这两种情况似乎具有相同的效果。两者有区别吗？

我想要制作边框动画并缓慢显示它，就像这个 Codepen一样，但有一些区别：

• 不删除旧行，但需要显示类似的内容。

• 颜色不应该是霓虹灯而只是简单的边框

• 它应该只动画一次而不重复。

一段简单的代码如下所示

<div class="boxes">
  <div class="row">
    <div
      class="col-lg-6"
      data-aos="zoom-in-right"
      data-aos-duration="800"
    >
      <div class="right-box left">
        <h2>Heading1.</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Nulla in erat et quam semper convallis. Phasellus vel nisl
          id leo suscipit molestie. Sed nec dignissim urna. Donec
          sit amet tortor nulla. Etiam tempus dui id ipsum commodo,
          et laoreet tortor luctus. Ut dapibus.
        </p>
      </div>
    </div>
    <div
      class="col-lg-6"
      data-aos="zoom-in-left"
      data-aos-duration="800"
    >
      <div class="left-box">
        <img …