使用Bootstrap模式,我已经看到aria了很多这些属性,但我从来不知道如何使用它们.

有谁知道使用这些属性的情况？我google了 - 只是没有找到任何直截了当的答案.

我的项目遇到了一些麻烦.任何人都可以向我解释为什么我不能使用它e.target来访问除了以外的任何东西className？

以下是我的入口点的代码:

import React from 'react'
import ReactDOM from 'react-dom'
import Button from './Button'
import Menu from './Menu'

function test(e){
    console.log(e.target.ref)
 }

module.exports = class Content extends React.Component {
    constructor(props){
        super(props)
        this.state={content: ''}
    }

update(e){
    console.log(e.target.txt)

}

render (){
    return (
        <div id="lower">
            <div id="menu">
               <Menu onClick={this.update.bind(this)}/>
            </div>
            <div id="content">
                {this.state.content}
            </div>
        </div>
    )

  }
}

我试图使用该方法访问菜单组件中的设置update.见下面的菜单:

module.exports = class Menu extends React.Component {

    render (){
       return (
           <div>
               <Button …

再次得到同样的错误:Error: Cannot find module 'babel-preset-es2015'.

完整错误日志:

ERROR in ./main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-es2015' from 'C:\Users\hp\Desktop\reactApp'
 at Function.module.exports [as sync] (C:\Users\hp\Desktop\reactApp\node_modules\resolve\lib\sync.js:43:15)
 at resolveStandardizedName (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
 at resolvePreset (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
 at loadPreset (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
 at createDescriptor (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
 at items.map (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
 at Array.map ()
 at createDescriptors (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
 at createPresetDescriptors (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
 at passPerPreset (C:\Users\hp\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:58:96) @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./main.js main[2]

我用 Vite 创建了一个 React 项目，也想使用 SASS。我已经安装了它，但我通常打开 git bash 并运行sass -w sass:css.

有更好的方法吗？我无法理解文档中的解决方案，也无法理解在线答案。

这是我的package.json：

{
  "name": "my_first_vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "sass": "^1.49.0",
    "vite": "^2.7.2"
  }
}

useSWR我有一个单元测试，其中包括渲染用于获取数据的组件。但在调用之前数据尚未准备好，expect()因此测试失败。

test("StyleOptionDetails contains correct style option number", () => {
    renderWithMockSwr(
        <StyleOptionDetails
            {...mockIStyleOptionDetailsProps}
        />
    )
    expect(screen.getByText(123)).toBeInTheDocument();
});

但如果我延迟setTimeout()，它就会通过测试。

setTimeout(() => {
    console.log('This will run after 2 second')
    expect(screen.getByText(123)).toBeInTheDocument();
}, 2000);

创建延迟或等待数据的正确方法是什么？

错误说：不要将孩子作为道具传递。相反，当我添加这部分“children={}”时，将子级嵌套在开始和结束标记之间

我不熟悉反应和脉轮所以有人可以帮助解决这个问题吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<Stack id='phone'>
  <InputGroup>
    <InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} />
    <Input
      type='tel'
      name={`${type}[phone]`}
      autoComplete='phone'
      value={Phone}
      placeholder='Numero de telephone'
      className='chakra-input'
    />
  </InputGroup>
</Stack>

好的，第一次在这里发布。我几天来一直在寻找有关此问题的帖子，但找不到解决方法。

我有一个具有唯一ID的图像矩阵（基本排列的球体）。我想为上述领域添加不同的功能。因此，我继续添加事件侦听器。到目前为止一切都很好。触发第一个事件后，我希望所有领域都更改其事件侦听器，因此我继续删除所有事件侦听器并添加新的事件侦听器。我无法删除事件监听器。

添加事件：

for (let i = 0; i < 11; i++) {
    for (let j = 0; j < 11; j++) {
        if ((i > 1 && i < 9 && j > 1 && j < 9) && checkCorners(i, j) === true) {
            let ball = document.getElementById(i.toString() + j.toString());
            ball.addEventListener('click', removeBall(i, j));
        }
    }
}

removeBall():

var removeBall = function(i, j) {
    return function curried_func(ii, jj) {
        let ball = document.getElementById(i.toString() + j.toString());
        ball.src = "./public/assets/ball_empty.png";
    } …

将 jsdom 添加到 vite.config.ts 会出现以下错误：

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ plugins: PluginOption[][]; test: { environment: string; }; }' is not assignable to parameter of type 'UserConfigExport'.
      Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'.ts(2769)
index.d.ts(579, 25): The last overload is declared here.

这是 vite.confg.ts 代码，其中突出显示了错误：

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],  
  test: {
    environment: 'jsdom',
  },
}) …

理想的

我想从子组件获取输入数据。

我试过的

<script>
  import Input from "./Input.svelte";
  let userGoal = "";
</script>

<h1>Your Goal is {userGoal}</h1>

<Input {userGoal} />

<script>
  export let userGoal = "";

  $: console.log(userGoal);
</script>

<input type="text" bind:value={userGoal} />

$: console.log(userGoal);正如我预期的那样，在每个事件中都显示 userGoal。但是，它不会影响父组件。

概括

我是 Svelte 的新手。任何帮助表示赞赏。