标签: react-18

npx create-react-app my-project导致以下依赖错误：

npx版本：8.5.0

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-18@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<18.0.0" from @testing-library/react@12.1.5
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^12.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! …

在我的基于 React 的库中，我在 3 个不同的级别上使用ReactDOM.render。第一级位于根级，我很清楚并使用以下代码替换了它：

import { createRoot } from 'react-dom/client';
    
const root = createRoot(domElement);
root.render(reactElement);

对于其他两个级别（根的子级），我想在指定的 DOM 元素中渲染某个组件。如果我正在使用：

import { createRoot } from 'react-dom/client';

const root = createRoot(childDomElement);
root.render(reactElement);

我收到以下警告：

您正在对之前已传递给 createRoot() 的容器调用 ReactDOMClient.createRoot() 。相反，如果您想更新它，请在现有根上调用 root.render() 。

在特定 DOM 元素中渲染组件的正确方法是什么？

我有一个罕见的用例，我需要在我的 React 组件中注册多个根，并在组件卸载时销毁它们。显然，我在渲染时卸载了根。root.unmount()我通过在 后立即调用来模拟这种情况root.render(...)。在以下示例中：https://codesandbox.io/s/eager-grothendieck-h49eoo? file=%2Fsrc%2FApp.tsx

这会导致以下警告： Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

这个警告对我来说意味着有一种异步方法可以卸载根目录，但我无法找到如何卸载根目录的方法。包装root.unmount()在异步函数 ( const unmount = async () => root.unmount()) 中不起作用。有任何想法吗？我在这里得到完全错误的东西吗？

所以我更新到了 React 18，现在我收到了大量的行为警告以及失败的测试。

版本：

反应：18.2.0

反应-dom：18.2.0

笑话：29.3.1

笑话环境-jsdom：29.3.1

ts-笑话：29.0.3

打字稿：4.9.4

console.error 警告：测试中对 ProductPrice 的更新未包含在 act(...) 中。
测试时，导致 React 状态更新的代码应包装到 act(...) 中：

我通过将断言或我的主要渲染方法包装在await waitFor(() => {}.

我应该有更好的方法来修复这些测试吗？这是一个示例测试，通过以下更改从失败变为通过...在我升级到 React 18 和相应的 React-testing-library + jest 版本之前，以下失败的测试已通过

-------------以下测试失败--------------

async function findPlpHeaderText() {
  return screen.findByTestId('plp__header-text');
}

test.only('Sold out products render as expected on store', async () => {
    await renderPage({ route: '/boutique/21443255', siteName: 'anonymous-store' });
    const headerText = await findPlpHeaderText();

    await within(headerText).findByText('Childless boutique');
    await screen.findByText('Sold Out');
    await screen.findByText('Sold Out. Must Have …

升级到 React 18 后，我遇到了 Leaflet 弹出窗口渲染问题。

看来新的渲染函数已经变成了异步，这破坏了Leaflet弹出窗口的显示（因为Leaflet需要计算弹出窗口的大小来定位，但现在它得到的是空内容，因为React尚未渲染弹出窗口）。

之前（按预期工作）：

marker.bindPopup(() => {
  var div = document.createElement('div');
  ReactDOM.render(<MyPopup />);
  console.log(div.innerHTML); // <div>[...]</div>
  return div;
});

使用 React 18（定位损坏）：

marker.bindPopup(() => {
  var div = document.createElement('div');
  createRoot(div).render(<MyPopup />);
  console.log(div.innerHTML); // empty string!
  return div;
});

有没有办法强制 React 18 在返回之前渲染弹出窗口div？

预先感谢您的帮助和想法

我有一个使用react版本17.0.2和react-scripts版本的反应应用程序4.0.3

我将我的反应版本更新到 18，但我没有更新我的反应脚本。

这是正确的做法吗？我真的需要升级react-scripts才能体验React 18的所有新功能吗？

当我运行命令时，我想在我的反应本机项目中使用自定义字体系列

npx react-native link

它向我显示了错误error Unrecognized command "link"。据我检查，这可能是因为react-native从最新版本的react-native中删除了链接命令。

所以我想知道如何在不使用react-native link命令的情况下链接字体系列。我正在使用以下版本的react和react-native

"react": "18.0.0",
"react-native": "0.69.1",

最后感谢您提前提供的帮助。

我在我的项目中使用 React-18.0.0，在测试文件中我收到以下错误

createRoot(...)：目标容器不是 DOM 元素。

我的测试文件是：

import ReactDOM from 'react-dom/client';
import { render, screen } from "@testing-library/react";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

test("renders learn react link", () => {
    root.render(<App />);
    const linkElement = screen.getByText(/Hello React/i);
    expect(linkElement).toBeInTheDocument();
});

我刚刚开始学习 Daniel Irvine 的《Mastering React Test-Driven Development》，我认为将示例转换为 React 18 应该不会太难。但是我在转换书中的第一个测试时遇到了麻烦使用笑话。

这本书没有使用create-react-app任何东西，而是从头开始构建 React 应用程序，所以我很难找到如何转换代码的相关示例。

当按照书中的 React 17 风格编写时，测试通过了。但如果我替换ReactDOM.render()为createRoot()，测试就会失败。

我的应用程序目录如下所示：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Appointment.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Appointment.test.js\n

文件内容是：

package.json：

{\n  "name": "appointments",\n  "version": "1.0.0",\n  "description": "Appointments project from Mastering React Test-Driven Development.",\n  "main": "index.js",\n  "scripts": {\n    "test": "jest"\n  },\n  "repository": {\n    "type": "git",\n    "url": "example.com"\n  },\n  "author": "",\n  "license": "ISC",\n  "devDependencies": {\n    "@babel/plugin-transform-runtime": "^7.18.6",\n    "@babel/preset-env": "^7.18.6",\n …

我正在使用 Next.js 并测试他们的新数据获取方式，但这也可能是一个常见的 React 18+ 问题，因为库本身正在转向客户端和服务器组件之间的区别。

假设我有这样的设置：

// page.tsx (server component)
export default function Home() {
  return (
    <>
      <Search /> {/* Search is a client component that tracks state for an input */}
      <ServerData /> {/* ServerData is a server component that gets the initial data */}
    </>
  )
}

由于Search跟踪input状态，我如何使用该值并对 进行客户端过滤器ServerData？

我尝试过的： Search可以是接受孩子道具的客户端组件。page.tsx可以重构，以便SearchData作为子项传递给 Search 并ServerData可以接受输入 prop。这可能行不通，因为我无法传递input到ServerDataasSearch只能将其理解为children …