标签: reactjs

我正在使用以下Material UI Carousel库，但我无法理解如何为轮播创建多个项目。

我在文档中搜索过，没有解决方案，尝试通过定义宽度来使用 CSS 进行操作，如下所示：

  .item{
    margin: 0 auto;
    text-align: center;
    width: 30%;
  }

也没起作用。

这是我的代码：

 function Home() {
  var items = [
    {
        name: "Pizza Begin",
        link: "pizza-begin.co.il",
        image: Begin
    },
    {
        name: "Mia Luz",
        link: "mia-luz.com",
        image: Mia
    },
    {
        name: "Nuda Swim",
        link: "nudaswim.com"
    }
   ];


   return(<>
    <Carousel navButtonsAlwaysInvisible={true} animation="slide" activeIndicatorIconButtonProps={{className: "activeIndicator"}}>
        {
            items.map( (item, i) => <Item key={i} item={item} /> )
        }
    </Carousel>

</>);
}

function Item(props)
{
    return (
        <Paper className="item">
            <img …

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

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

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

当我指定自定义和SEC_ERROR_INADEQUATE_KEY_USAGE创建的反应应用程序时，我在 Firefox 中遇到错误create-react-appHOSTSSL=true

要重现该问题：

1. 创建一个新的反应应用程序

   npx create-react-app testssl 
   

   Run Code Online (Sandbox Code Playgroud)

2. 添加一个.env文件

   HTTPS=true
   HOST=test.local
   

   Run Code Online (Sandbox Code Playgroud)

3. 确保test.local映射到127.0.0.1您的主机文件中

   # "C:\Windows\System32\drivers\etc\hosts"
   127.0.0.1 test.local
   

   Run Code Online (Sandbox Code Playgroud)

4. 启动应用程序

   npm run start
   

   Run Code Online (Sandbox Code Playgroud)

在 chrome 中我有一个security error但我可以绕过它

在 Firefox 中，我有一个SEC_ERROR_INADEQUATE_KEY_USAGE，但我找不到绕过它的方法：

Firefox 有没有办法绕过这个错误？

我在windows环境下出现这个错误，不知道linux下是否如此。

我正在尝试将 Web3 添加到 React 项目。\n我已经使用以下命令初始化了一个新项目

gatsby new\n

然后，我安装了web3

npm install --save web3\n

当我在 index.js 中包含 web3 时

import Web3 from 'web3'\n

如果我打电话

gatsby develop\n

我有一些奇怪的错误：

\n

./node_modules/eth-lib/lib/bytes.js 9:193-227\n中出现错误：找不到模块：错误：无法解析“/home/test/gatsby/test/test/node_modules/eth”中的“加密” -lib/lib'

\n

\n

重大更改：webpack < 5 过去默认包含 Node.js 核心模块的 Polyfill。\n现在情况已不再如此。验证您是否需要此模块并为其配置一个polyfill。

\n

\n

如果你想包含一个polyfill，你需要：\n- 添加后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'\n- 安装 'crypto-browserify'\如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：\nresolve.fallback: { "crypto": false }\n\xc2\xa0@ ./node_modules/swarm-js/lib/api -browser.js 32:12-40\n\xc2\xa0@ ./node_modules/web3-bzz/lib/index.js 24:12-31\n\xc2\xa0@ ./node_modules/web3/lib/index .js 34:10-29\n\xc2\xa0@ ./src/pages/index.js 9:0-24\n\xc2\xa0@ ./.cache/ this_is_virtual_fs_path /$virtual/async-requires.js 21:11-23:5\n\xc2\xa0@ ./.cache/app.js 17:0-52 …

我正在研究 React js，我使用 npm 通过 create-react-app 创建了我的应用程序。我试图构建一个按钮来获取图像并将其写入剪贴板。幸运的是，我发现这个npm 库似乎工作得很好！但我一直在思考为什么我不能使用\xc2\xbfbuilt-in？ 用于复制图像的异步剪贴板 API（文本复制工作正常）。我在这里读了一本非常有启发性的指南，并在这里继续阅读其他很棒的指南，所以我尝试了那里和其他页面中建议的所有代码（尽管它们似乎并没有真正改变功能，但我必须尝试）。我在每次尝试时都遇到了同样的错误，阻碍了编译：“\'ClipboardItem\'未定义 no-undef ”。例如，一个代码是这样的：

const response = await fetch(\'valid img url of a png image\');\nconst blob = await response.blob();\nawait navigator.clipboard.write([new ClipboardItem({ \'image/png\': blob})]);\n\n

它看起来很简单，很容易遵循。问题是，当您需要将数据放入剪贴板可以读取的表单中，使其成为一个 blob 时，因为我需要 ClipboardItem 构造函数，而我的应用程序似乎无法识别它。当然，不断返回 ClipboardItem 未定义，或者如果我以某种方式定义它，则表示它不是构造函数。我尝试使用其他构造函数，例如 Blob()，但遇到了同样的问题。最后一件事让我一直在思考，由于我是编程世界的新手，如果有一些基本的东西我不知道 Web API 与 Node 或 Reactjs 的交互，以及是否有一个当然是解决方案！提前谢谢你们，你们太棒了！

编辑：根据要求添加整个组件代码：

import React from "react";\n  \nfunction TestingClipAPI () { \n\n  async function handleScreenshot () {\n    const response = await fetch(\'https://i.postimg.cc/d0hR8HfP/telefono.png\');\n    const blob …

我有以下 React 代码（+Tailwind CSS）：

<section className={"flex flex-col items-center"}>
      {managers.map((manager) => (
        <UserCard user={manager} />
      ))}

      <section className={"flex flex-row"}>
        {coWorkers.map((coWorker) => (
          <UserCard user={coWorker} isMarked={user.id === coWorker.id} />
        ))}
      </section>

      {engineers.map((engineer) => (
        <UserCard user={engineer} />
      ))}
    </section>

虽然 UserCard 很简单：

export default function Error({ user, isMarked }: Props) {
  return (
    <article
      className={`bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg ${
        isMarked && "border-4 border-purple-800 font-bold"
      }`}
    >
      <h1>
        {user.firstName} {user.lastName}
      </h1>
      <h2>{user.email}</h2>
    </article>
  );
}

问题：卡片的宽度不同，例如：

知道如何使用 tailwindcss 确保它们的宽度相同吗？（每行/列）

FROM node:14.16.0-alpine3.13
RUN addgroup app && adduser -S -G app app
USER app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package*.json ./
RUN npm install
COPY . .
ENV APP_URL=http://api.myapp.com
EXPOSE 3000
CMD ["npm", "start"]

这是我的泊坞窗文件。我正在尝试对示例反应应用程序进行 dockerize。我在组中添加了用户，然后使用该用户执行进一步的命令，您可以在该代码的第二行中看到这一点。我相信默认情况下，只有 root 用户有权写入这些文件，并且为了对这些文件进行更改，root 用户不应该是用户。因此我app在这里创建了用户。

但跑完之后docker build -t react-app.。我收到以下错误 -

我在这里做错了什么？有什么建议么？

添加Run ls -la后Run whoami-

如果我用这个

  useEffect(() => {
dispatch(fetchToDos())}, [debouncedToDo, loginInfo.isLogin])

我收到此警告

React Hook useEffect 缺少依赖项：“dispatch”。包含它或删除依赖项数组react-hooks/exhaustive-deps

如果我在依赖项数组中包含“dispatch”，警告就会消失。

像这样：

  useEffect(() => {
dispatch(fetchToDos())}, [dispatch, debouncedToDo, loginInfo.isLogin])

我正在开发一个带有许多页面的Next.js 电子商务应用程序，其中一些是所有产品页面、特定产品页面、博客文章页面、个人资料页面、购物车页面等等。这个应用程序需要强大的 SEO，因此我选择了 Next.js，但是，我对其数据获取选项 - SSR 和 SSG没有太多经验。我在 Next.js 中阅读了很多关于 SSR 和 SSG 的文章，但我不确定我是否理解正确。

由于我是新手，因此我选择了getServerSideProps几乎所有需要在渲染之前从 RESTful API 加载内容的页面。然而，我发现一篇文章指出，产品页面的最佳选择是与withgetStaticProps一起使用，并在某个页面尚未预渲染时渲染加载指示器。然而，我的应用程序经常更改数据，数据库包含超过 10k 个产品，这些产品正在定期删除、编辑或添加。我的第一个问题是，在这种情况下，和是否是一个好的选择。产品数据会随着每次页面浏览而更新吗？或者我需要SSR吗？客户始终需要查看产品的最新更新。同样的问题也适用于所有产品页面，因为它应该只显示当前可用的产品，并在缺货时立即隐藏它们。getStaticPathsfallback = truegetStaticPropsgetStaticPaths