小编Ahm*_*ınç的帖子

import React, { useState } from "react";\nimport FileBase64 from "react-file-base64";\nimport { useDispatch } from "react-redux";\nimport { makeStyles } from "@material-ui/core/styles";\nimport { TextField, Select, Input, MenuItem, Button } from "@material-ui/core";\nimport { useForm, Controller } from "react-hook-form";\nimport { yupResolver } from "@hookform/resolvers/yup";\nimport * as yup from "yup";\nimport { updatePost } from "../actions/post";\n\nconst useStyles = makeStyles((theme) => ({\n  textField: {\n    marginBottom: theme.spacing(2),\n  },\n  buttons: {\n    marginTop: theme.spacing(2),\n  },\n}));\n\nconst tags = ["fun", "programming", "health", "science"];\n\nconst postSchema = yup.object().shape({\n  title: yup.string().required(),\n  subtitle: yup.string().required(),\n  content: yup.string().min(20).required(),\n …

我从pluralsight教程下载了一个项目文件夹，当我尝试使用npm start运行它时，它显示以下消息：

[webpack-cli] 无法加载“@webpack-cli/serve”命令 [webpack-cli] TypeError: options.forEach 不是 WebpackCLI.makeCommand 中的函数 (C:\Users\Israel Juarez\Desktop\before\node_modules\ webpack-cli\lib\webpack-cli.js:173:21)

at ServeCommand.apply (C:\Users\Israel Juarez\Desktop\before\node_modules\@webpack-cli\serve\lib\index.js:41:19)

at loadCommandByName (C:\Users\Israel Juarez\Desktop\before\node_modules\webpack-cli\lib\webpack-cli.js:907:35)
at async Command.<anonymous> (C:\Users\Israel Juarez\Desktop\before\node_modules\webpack-cli\lib\webpack-cli.js:1462:17)
at async Promise.all (index 0)
at async WebpackCLI.run (C:\Users\Israel Juarez\Desktop\before\node_modules\webpack-cli\lib\webpack-cli.js:1500:9)

at async runCLI (C:\Users\Israel Juarez\Desktop\before\node_modules\webpack-cli\lib\bootstrap.js:11:9)

Run Code Online (Sandbox Code Playgroud)

npm 错误！代码 ELIFECYCLE npm 错误！errno 2 npm 错误！ps-redux@1.0.0 开始：webpack serve --config webpack.config.dev.js --port 3000npm 错误！退出状态 2 npm ERR！npm 错误！ps-redux@1.0.0 启动脚本失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
C:\Users\以色列华雷斯\AppData\Roaming\npm-cache_logs\2021-10-20T17_42_05_820Z-debug.log

在我的应用程序中，我使用 DataGrid 组件来显示查询数据库后获得的结果。我使用的是组件提供的默认分页，它运行得很好。尽管如此，现在我想在分页旁边添加一个包含额外信息的新字段。下图显示了分页的显示方式，用红色标注了我要添加的内容：

我尝试使用此处描述的自定义组件。首先，我尝试包含自定义页脚组件，但它替换了整个默认分页组件。然后，我一直尝试通过包含我想要添加的新字段以及分页来使用自定义分页组件。问题是我不知道如何将 TablePagination 组件（根据文档默认使用的分页）与 DataGrid 组件连接。

该文档提供了如何将分页组件与 DataGrid 一起使用的示例：

function CustomPagination() {
  const { state, apiRef } = useGridSlotComponentProps();
  const classes = useStyles();

  return (
    <Pagination
      className={classes.root}
      color="primary"
      count={state.pagination.pageCount}
      page={state.pagination.page + 1}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}
    />
  );
}

export default function CustomPaginationGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        pagination
        pageSize={5}
        components={{
          Pagination: CustomPagination,
        }}
        {...data}
      /> …

我在一个项目中使用 ApexChart，我想为每个条形图设置不同的颜色。我将数据数组和颜色数组传递给组件，根据颜色数组索引，相关数据栏应该着色。

当前的实现如下，我厌倦了 color: 方法，但它只获取颜色数组的第一种颜色。

const options: ApexOptions = {
    chart: {
        height: 200,
        type: 'bar',
        offsetY: 16,
        toolbar: {
            show: false,
        },
    },
    plotOptions: {
        bar: {
            horizontal: true,
            barHeight: '85%',
        },
    },
    dataLabels: {
        enabled: false,
    },
    xaxis: {
        position: 'top',
    },
    yaxis: {
        show: false,
    },
    grid: {
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },  
    },     
};

const series = [
    {
        data: exampleChartData.data || [],

    }
];

return (
    <Chart
        options={options}
        series={series} …

我需要一些帮助来处理reactjs中的本地视频文件...无法解决./assets/video.mp4错误...尝试了所有可能的方向..

这背后的想法是制作一个像https://www.w3schools.com/howto/howto_css_fullscreen_video.asp 但使用 Reactjs 的全屏视频。

视频.js

       import React from 'react';

       class Video extends React.Component {
       render(){
          return(
             <div className="myVideo">
                 <video controls autostart autoPlay src={this.props.src} type={this.props.type}/>
            </div>
             )
           }
         }

         export default Video;

索引.js

      import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Video from './video';
import Robin from './assets/Robin.mp4'

const VIDEO = {
  src:Robin,
  type:'video/mp4'
 };

class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       src: VIDEO.src,
       type:VIDEO.type
     }
   }

   render(){
     return(
       <div>
         <Video src={this.state.src} type={this.state.type}/>
       </div>
     )
   } …

我正在尝试为我的反应项目构建一个拖放列表。我正在使用react-beautiful-dnd 库。但我面临这个错误：

错误：不变失败：找不到所需的上下文

我发现是可拖动组件引发了此错误

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
   Some code goes in here....
</div>
)}

<Draggable/>

然后我发现了这个github问题：https://github.com/atlassian/react-beautiful-dnd/issues/948 根据这里建议的解决方案，我添加了一个样式函数

const getStyle = (style, snapshot, backgroundColor) => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

然后将样式添加到div中

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style= 
{getStyle(provided.draggableProps.style, snapshot)>
   Some code goes in here....
</div>
)}
<Draggable/>

但我仍然无法解决这个问题...我能做些什么来解决这个问题？

我正在尝试使用上下文提供程序应用自定义 MUI 主题，但该主题未应用于子组件中。

这是我的调色板代码：

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core";
import { orange } from "@material-ui/core/colors";

const theme = createTheme({
  palette: {
    primary: orange,
    secondary: {
      main: "#000000",
    },
  },
});

export default function Palette({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

这是我使用它的自定义按钮：

import React from "react";
import Icon from "@material-ui/core/Icon";
import Button from "@mui/material/Button";
import Palette from "../Themes/Palette";

export default function IconButton({ icon }) {
  return (
    <Palette>
      <Button
        sx={{
          width: 60,
          height: 60, …

我有一个简单的组件集成测试:

test('it throws error my-custom-input is called', function(assert) {
    assert.throws(() => {
        this.render(hbs`{{my-custom-input}}`);
    }, /my-custom-input component error/, 'Error must have been thrown');
});

component.js的源代码如下:

export default Ember.Component.extend({
    layout,
    init() {
        this._super(...arguments);
        throw 'my-custom-input component error';
    }
}

虽然我的ember-cli版本是2.3.0,但测试正在通过.但是,在我将我的ember-cli版本更新为2.11.1后,测试没有通过.错误是:

    actual: >
        false
    expected: >
        true

为什么ember render开始吞下抛出的异常？

是否可以让父组件的 props 在子组件中可用而不将它们传递下来？

我正在尝试实现一个提供程序模式，以便访问其子组件中的所有提供程序道具。前任：

假设下面的提供程序 compFetchProvider 将自行获取数据和主题道具，并且当它包含任何子组件时，我也想访问子组件中的道具“数据”和“主题”。我们怎样才能实现它呢？

class FetchProvider 
{

   proptypes= {
     data: PropTypes.shape({}),
     theme: PropTypes.shape({})
   }

   render()
   {
     // do some
   }

   mapStateToProps()
   {
      return {data, theme};
   }
}

class ChildComponent
{

   proptypes= {
     name: PropTypes.shape({})
   }

   render()
   {
     const{data, them} = this.props; // is this possible here?
     // do some
   }
}

如果我尝试使用上面的组件，如下所示。

<FetchProvider>
   <ChildComponent name="some value"/>  //how can we access parent component props here? without passing them down
<FetchProvider/>

我有一个 Typescript 库，正在从 React 应用程序中使用。我想导入带有子路径的 TS 库内容，例如

import {base} from "my-lib"
import {foo} from "my-lib/path1"
import {bar} from "my-lib/path2"

我遇到了Github 问题exports，其中指出Typescript尚不支持此功能（在 package.json 中）。我正在使用 Typescript 4.3。

在同一线程中发布了一个解决方法 - Github repo typescript-subpath-exports-workaround。它使用exports和typeVersions

{
  "main": "dist/index.js",
  "types": "dist-types/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./exported": "./dist/exported.js"
  },
  "typesVersions": {
    "*": {
      "exported": ["dist-types/exported"]
    }
  }
}

我创建了一个新的反应应用程序（通过npx create-react-app命令）并尝试hello从中导入typescript-subpath-exports-workaround并且工作正常。但无法导入`typescript-subpath-exports-workaround/exported

import {hello} from "typescript-subpath-exports-workaround" //works fine
import {foo} from "typescript-subpath-exports-workaround/exported" //gives "Module not found" …