小编the*_*uls的帖子

我有一个函数,它从父级一直到组件层次结构中的子级的子级.通常这不会是一个太大的问题,但我需要从孩子那里收到一个参数.我目前收到此错误消息:Uncaught(在promise中)TypeError:this.props.myFunction不是函数.

这是我正在做的一个示例代码:

class SomeComponent extends Component{

    constructor(props){
        super(props);
        //does whatever stuff        
        this.myFunction = this.myFunction.bind(this);

    }

    //(only applicable to raw and normal forms)
    myFunction(param){
        console.log('do something: ', param);
    }

    render(){
     return (<div><ChildComponent1 myFunction={()=>this.myFunction()}/></div>)
    }
}

class ChildComponent1{
      render(){
  return (<div><ChildComponent2 myFunction={()=>this.props.myFunction()}/></div>)
    }
}

class ChildComponent2{
      render(){
  return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>)
    }
}

所以只是为了解决这个问题:我将myFunction作为道具从SomeComponent一直传递到ChildComponent2,我希望只要点击一个按钮就调用它,并从ChildComponent2传递参数.

谢谢!

我正在创建一个 bash 脚本，它运行在我的每个项目中，并npm run test在test脚本存在时运行。

我知道，如果我进入一个项目并运行npm run它，它将为我提供可用脚本列表，如下所示：

Lifecycle scripts included in www:
  start
    node server.js
  test
    mocha --require @babel/register --require dotenv/config --watch-extensions js **/*.test.js

available via `npm run-script`:
  dev
    node -r dotenv/config server.js
  dev:watch
    nodemon -r dotenv/config server.js
  build
    next build

但是，我不知道如何获取该信息，查看是否test可用然后运行它。

这是我当前的代码：

#!/bin/bash

ROOT_PATH="$(cd "$(dirname "$0")" && pwd)"
BASE_PATH="${ROOT_PATH}/../.."

while read MYAPP; do # reads from a list of projects
  PROJECT="${MYAPP}"
  FOLDER="${BASE_PATH}/${PROJECT}"
  cd "$FOLDER"
  if [ check here if the command …

使用 CLI 创建了一个简单的 Vue 项目：

vue 创建我的项目

想加两个页面，所以安装了最新版本的vue-router（目前是v3.4.8），按照vue精通教程进行路由。

这是我的 router.js 文件的样子：

import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
  ]
})

export default router

当然，这就是我的 main.js 文件的样子：

import { createApp } from 'vue'
import router from './router'

createApp({
  template: `
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/create'>Create</router-link>
  </div>
  ` …

我有一个样式化的组件，需要接收 props 来决定它应该如何设计样式。看起来像这样：

const StyledTypography = styled(Typography)(
  ({ myColor = "black", isLarge = false }) => ({
    "&&": {
      fontSize: isLarge ? 30 : 16,
      border: `1px solid ${myColor}`,
      margin: 10,
      color: myColor
    }
  })
);

不幸的是isLarge会导致以下警告：

警告：React 无法识别isLargeDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写islarge。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

（与 相同myColor）

在另一个线程中，我被告知需要做的就是用作shouldForwardProp在第二个参数中返回布尔值的函数来决定应将哪些道具传递给 DOM DOM：

const StyledTypography = styled(Typography, { shouldForwardProp: () => false })(
 ...
);

不幸的是这不起作用。

有办法做到这一点吗？

这是一个包含警告和所有内容的工作示例应用程序：https://codesandbox.io/s/crimson-fast-qll47 ?file=/src/App.js

我有一个模态,用户需要填写一些表格,并通过模态中的按钮保存所填写的内容.当用户保存时,我希望关闭模态.通过open在Modal组件上使用prop ,我可以完成这项工作.但是,如果我这样做,当我尝试通过closeIcon时,模态不会关闭.

我该怎么做才能让用户通过这两种方法关闭Modal？

这是我目前的模态代码:

  handleCreateButton (evt) {
    evt.preventDefault()
    // ...
    // code to save whatever was typed in the form
    // ...

    this.setState({showModal: false})
  }

  renderModalForm () {
    const {
      something,
      showModal
    } = this.state

    // if I have the open props, I get to close the Modal after the button is clicked
    // however, when using the icon or clicking on dimmer it wont work anymore.
    return (
      <Modal closeIcon closeOnDimmerClick open={showModal} trigger={<Button onClick={() => …

我有一个随着屏幕变小而需要包装的项目列表。还有另一个项目需要与它们保持特定的空间，特别是 8px。

问题是，当它们开始换行时，被换行的元素会留下一堆空间。

所有项目之间的间隔必须为 8 像素，包括不换行的项目。我怎样才能做到没有空白空间？

这是一个工作示例：

const App = () => {

  return (
    <div>
      <p>see the items below, regardless of how many I have, I need to hide whatever doesn't fit on the line screen.</p>
      <p>All items need to have 8px gap in between them, including the green one which does not wrap.</p>
      <h5>How can this be done?</h5>
      <div className="container">
        <div className="wrap-container">
          {Array.from({ length: 100 }).map((_, index) => <div className="item" key={index}>{index}</div>)}
        </div>
        <div className="non-wrap-item"> I need to be …

我有一个非常具体的边缘情况，我需要在模板文字中使用模板文字，但无法完成。

代码如下所示：

<p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p>

但是我必须将它包装在一个函数中，同时保持SOMELINK变量的值，这会导致错误发生。我是否逃脱了蜱虫。

someFunction (`<p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p>`)

使用转义刻度，我收到以下错误消息：

错误：应为 SOMELINK，但未提供

没有，我得到：

意外的令牌，预期的“，”

我该如何处理？

编辑：可能应该注意的是，传入的代码someFunction将被呈现并且需要使用。它最终将通过 传递给另一个标签dangerouslySetInnetHTML。所以它看起来像这样：

<div dangerouslySetInnerHTML={{__html: someFunction(`<p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p>`)}}/>

不确定这是否相关，但someFunction只是对文本进行了一些修改。

我有一堆 API 端点，text/csv它们在响应中返回内容。我如何记录这个？这是我目前拥有的：

  /my_endpoint:
    get:
      description: Returns CSV content
      parameters:
        - $ref: '#/components/parameters/myParemeters'
      responses:
        200:
          headers:
            $ref: '#/components/headers/myHeaders'
          content: text/csv

就目前而言，这不起作用，我在 Swagger 预览中得到了注释：

无法呈现此组件，请参阅控制台。

问题是如何正确显示 csv 响应的内容？我发现如果我添加一个模式是否有效，如下所示：

...
  content:
      text/csv:
        schema:
          type: array
          items:
            type: string
...

但是不应该有架构，因为它是 csv。那么回到问题，描述 csv 响应内容的正确方法是什么？

不确定是否相关，但周末我将操作系统升级到 Big Sur 版本 11.1，然后当我开始工作时，一件事接二连三地出现问题，现在我根本无法使用 Node 或 npm。我在 zsh 中收到以下消息：

% 节点-v

zsh：杀死节点-v

以及 bash 上的以下内容

节点-v

死亡人数：9

我尝试通过安装不同版本的节点n，这没有什么区别。

怎么变成这样了？

在此问题之前（在我的操作系统升级之后），我无法运行npm install，并且会收到以下消息：

超出最大调用堆栈大小

这似乎已经在该线程上报告过，但截至撰写本文时还没有回复。

正如该线程上的 OP 所说，我尝试安装 npm v7，它最初确实解决了我的问题npm install，但导致了项目的其他问题。

然后我决定使用n安装最新版本node，这导致了上面的错误。

有谁知道发生了什么事以及如何解决它？

编辑：我被迫卸载并重新安装节点才能回去工作，这确实解决了这个问题，但我保留了这个线程，以防有更好的解决方案。

我有一个简单的加载屏幕，我希望在文本末尾一次出现一个点。

不幸的是，当我希望一次出现一个然后重新开始时，我只能让它们眨眼。

我目前正在使用淡入淡出的动画，如下所示：

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

这是我所拥有的示例：

const App = () => {

  return (
  <h1>
    Loading<span>.</span><span>.</span><span>.</span>
  </h1>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

span:nth-child(1) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
}
span:nth-child(2) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
  animation-delay: 500ms;
}
span:nth-child(3) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
  animation-delay: 1000ms; …