标签: primereact

我收到以下错误 -

Failed to compile
./node_modules/primereact/components/dropdown/DropdownPanel.js
Module not found: Can't resolve 'react-transition-group' in 'D:\my-app\node_modules\primereact\components\dropdown'

这是我的 package.json

  "dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/react-transition-group": "^4.4.1",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primereact": "^6.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},

在 App.js 中

import React, { useState } from 'react';
import { Dropdown } from 'primereact/dropdown'; //getting error after adding this line
import 'primeflex/primeflex.css';

我在这里缺少什么？

我有一个在内部使用 Primereact 对话框的对话框组件。当我为此制作故事书时，按钮的自定义 css 会被导入，就像导入到dialog.jsx 中一样。但是 Primereact 对话框的默认 css 没有加载并反映在故事书中。尽管它正在我的 React 应用程序中加载。

对话框Comp.jsx

import { Dialog } from "primereact/dialog";


const DialogComp = (props) => {
  return (
    <Dialog
      className="dialog-modal"
      header={props.header}
      visible={true}
    >
      {props.children}
    </Dialog>
  );
};



export default DialogModal;

对话.storybook.js

import React from "react";
import DialogModal from "./dialogComp";

import { addDecorator, addParameters } from "@storybook/react";
import { Store, withState } from "@sambego/storybook-state";

import { store } from "./../../utils/storyStore";
const DialogModalComp = (props) => {
  return [
    <div>
      <DialogModal
        header="Dialog Modal" …

我在 React 应用程序的webpack.config中启用了CSS 模块，以便我可以在本地将 CSS 文件范围限定为单个组件。我也试图从使用TabView的组件PrimeReact。当我这样做时，不应用 PrimeReact 的主题。如果我创建一个单独的项目并且不启用 CSS 模块，则主题会正确应用。

如何使用 PrimeReact 主题并启用 CSS 模块？

我已经测试将位于 Tabs.js 中的内容直接移动到 App.js 中并获得相同的结果。

启用 CSS 模块

配置文件

require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash_base64:5]'
            },
          },

应用程序.js

import React, { Component } from 'react';
import classes from './App.css';
import Tabs from './UI/Tabs';

class App extends Component {
  render() {
    return (
        <Tabs/>
    );
  }
}

export default App;

标签页.js

import …

我似乎无法使用 styled-component 设置 PrimeReact 组件的样式。

鉴于以下代码来呈现 InputText，我的目的是改变它的宽度。但它不起作用。

import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';

class Component extends React.Component {
    render() {
        return (
            <InputText/>
        )
}

const ComponentView = styled(Component)`
    .ui-inputtext {
        width: 1000px;
    }
`;

我正在开发一个 React JS 应用程序，我添加了 ReactBootstrap 和 PrimeReact 库来进行样式设置。Reactbootstrap 库工作正常，但是 primereact 样式没有得到应用，我已按照入门部分中的所有步骤进行操作，任何人都可以建议我缺少什么。我正在添加文件以供参考。我使用以下命令在节点模块中添加文件

• npm 安装 primereact --save

• npm 安装 primeicons --save

应用程序.js 文件

import logo from './logo.svg';
import './App.css';
import Header from './MyComponents/Header'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';       
import {Todos} from './MyComponents/Todos'
import {TodoElements} from './MyComponents/TodoElements'
import {Footer} from './MyComponents/Footer'

function App() {
  
  <script src="https://unpkg.com/primereact/primereact.all.min.js"></script>
  
  return (
    <><Header title='Code With Shiva' searchBar={true}/>
    <Todos/>
    <TodoElements/>
    <Footer/>
    </>
  );
}

export default App;

Todos.js 我在其中添加 primereact 风格的按钮

import React from 'react';
import { …

在我的应用程序中，我有一个 DataTable 组件，一列（即“注释”）可以包含很长的文本。

我对该列的定义如下：

<Column style={{maxWidth: 220}} className={"text-overflow-ellipsis"} field={col.field}
                               key={col.field} header={col.header}/>;

我想我可以用 PrimeFlex 的“text-overflow-ellipsis”类来帮助自己，不幸的是没有成功。

我还使用了像react-clamp-lines或react-clamp这样的第三方库，但这些会产生完全相同的结果。

我的数据表如下所示：

我还尝试<ClampLine/>使用列的 body 属性来渲染元素，这应该在文本中添加省略号，不幸的是没有成功。

提前致谢！

我们在最新的项目中使用 PrimeReact，并且我们想要实现一个过滤器，其中列数据是一个数组，并且我们希望用户能够选择一个选项数组来过滤该列。（因此该列代表分配的用户，过滤器将是要过滤的用户的多选）。

这需要 CUSTOM 的过滤模式，并且文档提到了列上的 filterFunction 属性，但除此之外绝对没有其他详细信息。我将模式设置为“自定义”并为其提供了过滤功能，但它确实……完全没有任何作用。当我将模式设置为自定义时，该表会自动过滤所有内容。

为了简单起见，现在我只是在字符串列上测试它。以下是过滤器：

const [filters, setFilters] = useState({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchMode: FilterMatchMode.CUSTOM },
});

这是专栏：

<Column
    key="name"
    field="name"
    header="Name"
    sortable
    filter
    filterElement={searchFilterTemplate}
    filterFunction={() => console.log('test!')}
    showFilterMenu={false}
/>

注意：我在 filterFunction 中放入什么并不重要 - 什么也不会发生。另外，在node_modules中此方法的类型中，列上的filterFunction的返回类型为“void”，而我见过的每个示例都有一个返回类型“boolean”，这对我来说更有意义。看起来完全无聊，或者也许我错过了什么？

我希望能够在 primereact 中的主题之间切换，而不是导入一个主题，然后它会影响我的整个应用程序，并且我没有在深色或浅色模式之间切换的选项。

React 服务器组件让我们在文件顶部使用“use client”指令。这基本上破坏了 React 组件库（如 ReactBootstrap 和 PrimeReact），并使我们创建包装文件只是为了在该库导出的每个模块中添加“使用客户端”。但是我们是否可以使用一些 Webpack 功能在此类库中添加这个“使用客户端”？

我是 React/Spring 初学者，我不知道如何使用 Primereact 进行文件上传。他们的文档如下（https://www.primefaces.org/primereact/#/fileupload）：

FileUpload 需要一个 url 属性作为上传目标，并需要一个名称来标识后端的文件。

<FileUpload name="demo" url="./upload"></FileUpload>

但它既没有说明我如何获取数据，如何访问后端的“演示”，也没有说明我得到什么样的响应。

有人可以帮我吗？我已经在网上搜索过但没有找到任何东西。

我使用 的完整日历primereact，但我需要选择特定的年份和月份。为此，我有单独的日期选择器。但是当我尝试使用gotoDate完整日历的方法更改日期时，

有错误

'未捕获的类型错误：无法读取 null 的属性 'onViewDateChange'

//method on datepicker change
  handleChange(date) {
    console.log(date);
    this.setState({
      startDate: date.value,
    });
      const calendarEl = document.getElementById('fullCalendar');
      const calendar = new Calendar(calendarEl);
      calendar.gotoDate(date.value);
      // calendar.gotoDate(this.state.startDate);
    }
  }

//datepicker
<Calendar view="month" dateFormat="mm/yy" value={startDate} onChange={this.handleChange} yearNavigator yearRange="2015:2030"/>
//calendar
 <FullCalendar
                          id="fullCalendar"
                          firstDay={1}
                          defaultView={`${CalendarRepo()
                            .isCalendarModelMonth(model) === 'month' ? 'dayGridMonth' : 'timeGridWeek'}`}
                          header={{
                            left: 'prev,next today, custom',
                            center: 'title',
                            right: 'dayGridMonth,timeGridWeek',
                          }}
                          customButtons={{
                            custom: {
                              text: 'custom 1',
                              click() {
                                calendar.gotoDate();
                                alert('clicked custom button 1!');
                              }, …

我正在使用reactprime TreeSelect。我想通过编辑名为 的变量来创建一个数组returnArray，并通过 props 将其发送到主组件的状态。但onChange似乎未定义。相同的过程正在工作OnValueChanged。

主要组成部分：

return(
          <SubComponent>
            onChange={(val) => {
              console.log("here")
            if (val)
              setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
              });
          }}
          </SubComponent>
);

子组件：

  const nodeStateCh = (e) => {
    setSelectedNodeKeys(e.value)
    let rArray= []
    rArray.push("test")
    if (props.onChange) {  //undefined...
      props.onChange(returnArray)
    }
    
  }



  return (
    <div className="card flex justify-content-center">
      <TreeSelect
        value={selectedNodeKeys}
        onChange={nodeStateCh}
        options={nodes}
        metaKeySelection={false}
        filter
        className="md:w-20rem w-full"
        selectionMode="checkbox"
        display="chip"
        placeholder="Select Items"
      >
        {' '}
      </TreeSelect>
    </div>
  )

我正在使用 prime react 创建一个表格，表格的最后一列用于可以在表格上执行的操作，但是我正在关注文档，但是 onClick 事件在按钮上不起作用。当我单击搜索按钮时，出现错误：“UserList.js:19 Uncaught TypeError: _this2.selectUser is not a function”

请问有什么线索吗？

编码：

actionTemplate(rowData, column) {
    console.log('column', column);
    console.log('rowData', rowData);
    return (<div>
      <Button
        type="button" icon="fa-search"
        className="ui-button-success" onClick={() => this.selectUser(1)}
      />
      <Button
        type="button" icon="fa-edit"
        className="ui-button-warning"
      />
    </div>);
  }

  selectUser(userId) {
    console.log('selectUser');
    userId = 1;
    this.props.actions.fetchUser(userId);
  }


    renderTable() {
        const paginatorLeft = <Button icon="fa-refresh" />;
            /* const users = [
                    { name: '1', email: '1981', updateDate: '', creationDate: '05/03/2016' },
                    { name: '2', email: '1982', updateDate: '', creationDate: '04/02/2017' }, …