标签: react-dom

我正处于一种情况,我想做一些dom节点大小计算(渲染的DOM节点的顶部,底部和大小属性)

我现在正在做的,componentDidUpdate方法是调用findDOMNode:

 componentDidUpdate() {
        var node = ReactDOM.findDOMNode(this);

        this.elementBox = node.getBoundingClientRect();
        this.elementHeight = node.clientHeight;
        // Make calculations and stuff
}

这工作正常,但我有点担心性能,并做出最佳实践.有几个地方讨论使用refproperty而不是findDOMNode,但是所有这些都是针对子dom元素的,在我的情况下我只想要我的组件的根DOM节点.

使用ref的替代方案可能如下所示:

render(){
   return (
            <section // container
                ref={(n) => this.node = n}>
                 // Stuff
            </section>
}
 componentDidUpdate() {

        this.elementBox = this.node.getBoundingClientRect();
        this.elementHeight = this.node.clientHeight;
        // Make calculations and stuff
}

老实说,将ref回调附加到我的根dom节点只是为了得到它的引用对我来说感觉不对.

什么被认为是这种情况下的最佳做法？哪一个有更好的表现？

我在尝试 Next 13 beta 版本时，遇到了一个奇怪的问题。我想做的是，在服务器端获取数据并将其显示在页面上。但是，“获取”操作在服务器端失败。以下是 Next.js 页面的代码。它位于“app”目录下，如“app/pageName/page.js”

import React from 'react'

async function callApi() {
  const data = await fetch('https://api-psepeti.herokuapp.com/api/items/?search=yil');
  return data.json();
}

export default async function Page() {
  const data = await callApi();
  return (
    <main>
        {data.results && data.results.map((product, index) => (
          <h1>{product.title}</h1>
        ))}
    </main>
  )
}

单击查看错误消息。(UND_ERR_CONNECT_TIMEOUT)

单击查看 API 响应 (Django REST)

点击查看下13文档

注意：获取操作在大约 10 秒后失败。

我做了什么：

• 我尝试了axios，但也失败了。
• 我尝试将“enableUndici：true”添加到下一个配置文件中。（失败）
• 我尝试了其他模拟 API，有些有效，有些无效。（诡异的）
• 它们在客户端都正常工作。
• 他们在接下来的12年里都正常工作。
• 它们在任何其他 React 应用程序上都可以正常工作。

版本：

• 节点 18.12.0
• 下一个 13.1.0
• 反应18.2.0
• 反应-dom 18.2.0
• npm 9.2.0

操作系统：M1 IOS …

我正在关注 O'Reilly 的“Learning React”的第 5 章“React with JSX”。

我编写了 Recipes Appcreate-react-app作为基础。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';
import Menu from './Menu';

import registerServiceWorker from './registerServiceWorker';

import data from './data/recipes';

window.React = React;

ReactDOM.render(<Menu recipes={data} />, document.getElementById('root'));

registerServiceWorker();

菜单.js

import Recipes from './Recipes';

const Menu = ({recipes}) => (
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className = "recipes">
        {recipes.map((recipe, i)=>    
            <Recipes key={i} {...recipe}  />
        )}
        </div>
    </article>
);

export default …

我正在使用React与Webpack和Babel.我收到运行时错误:

未捕获的ReferenceError:未定义ReactDom

我的反应版本是:

"devDependencies": {
   "phantomjs-polyfill": "0.0.2",
   "react-addons-test-utils": "^0.14.8"
 },    
 "dependencies": {
   "react": "^0.14.7",
   "react-dom": "^0.14.7"
 },

我的代码是:

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './components/main';

ReactDom.render(<Main />, document.getElementById('root'));

我究竟做错了什么？

您好我正在学习React js,我遇到了一个问题.当我尝试使用react路由器更改回主页时,我收到以下错误:

未捕获的TypeError:无法读取未定义的属性"push"

这是我的代码,你可以看到我正在调用导航功能:

我的client.js与路由器:

如果我更换this.props.router.push('/');与this.props.history.push('/');它工作正常.可能是什么问题？谢谢你的时间.

我SettingsTab在一个名为的包装器中呈现一个React组件TeamView.它的API看起来像

class TeamView {
  constructor() {
    this.el = document.createElement('div');
  }

  render() {
    ReactDOM.render(<SettingsTab/>, this.el);
    return this;
  }

  remove() {
    this.el.remove(); 
  }
}

用过类似的东西

// to present the team view
const teamView = new TeamView();
document.body.appendChild(teamView.render().el);

// to remove the team view
teamView.remove();

我想知道的是,在打电话之前应该TeamView#remove打电话ReactDOM. unmountComponentAtNode(this.el)this.el.remove()吗？

我可以在网络上找到的示例使得看起来unmountComponentAtNode只需要在容器将保留在DOM中时才需要调用它; 并且新的门户示例只是删除容器,而不调用unmountComponentAtNode.

但是,我不确定这是否特别,因为它正在使用门户网站,而且这篇帖子让人觉得打电话总是好的做法unmountComponentAtNode.

这基本上都是我的代码.我正在运行Hapi并尝试使用react-loadable来服务器渲染我的React应用程序.

我在这里为代码添加了很多缺失的部分.

const location = req.url.pathname
const context = {}
const modules = []

const Router = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <Route path="/me" component={Profile} />
    <Route component={NotFound} />
  </Switch>
)

const App = () => (
  <StaticRouter location={location} context={context}>
    <main>
      <Header />
      <Router />
      <Footer />
    </main>
  </StaticRouter>
)

const preloadables = [ Home, Login, Profile, NotFound ]
await Promise.all(preloadables.map(preloadable => preloadable.preload()))

const html = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => …

当chrome版本更新为74（最新版本）时，我的react项目中出现上述错误。

我有一个罕见的用例，我需要在我的 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()) 中不起作用。有任何想法吗？我在这里得到完全错误的东西吗？

我设置了 webpack 分析器来查看我的包大小，我注意到 React-dom 被包含了两次。有谁知道这是为什么以及如何解决它？

这也是我的 package.json：

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "analyze": "cross-env ANALYZE=true next build"
  },
  "dependencies": {
    "framer-motion": "^10.12.16",
    "next": "^13.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^13.4.6",
    "autoprefixer": "^10.4.14",
    "cross-env": "^7.0.3",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2"
  }
}