标签: react-dom

将我的 mern 应用程序部署到 Heroku 后，GET主页上的请求('http://localhost:8000/post/')现在返回index.html而不是json data从请求中返回。我正在获取200 status代码，但响应是html. 但是，它在本地运行良好。
除了这个请求之外，所有其他请求都在工作。每当我认为我已经修复它时，Heroku 会在同一条路线上显示 json 数据而不是 UI。我假设这些问题是相关的。

我该如何解决这个问题？谢谢！

路由/控制器 - 列出帖子

router.get('/', (list)) 

exports.list = (req, res) => {
  const sort = { title: 1 };
  Post.find()
    .sort(sort)
    .then((posts) => res.json(posts))
    .catch((err) => res.status(400).json("Error: " + err));
};

服务器.js

require("dotenv").config();

// import routes
...
const app = express();

// connect db - first arg is url (specified in .env)
const url = …

我有以下问题，我不知道是否可以使用 Jest + 快照功能获得结果。

我有一个 React 组件，我正在使用 Jest 来测试它。

我希望快照包含css样式而不是className。

目前我的快照是这样的：

<div id="main" className="myClass"></div>

我想让它像：

<div id="main" style={Object {"float": "right"}}></div>

我的应用程序使用webpack ( sass-loader ) 来解析scss，所以那里没有问题。

有可能得到这种结果吗？

谢谢

我正在尝试将 react 集成到我的 angularjs webapp 中。

在我的控制器中，我创建了一个组件，它最初具有空的数组道具。当应用程序完成初始化后，我想再次更新道具。我是通过ReactDOM.render()再次调用来做到这一点，还是可以保留对此实例的引用并执行类似的操作updateProps(newProps)？

这是从我的控制器调用的：

ReactDOM.render(
    <NavBar
        currencyTabs = {[]}
    />, document.getElementById("navbar-root")
);

然后当数据加载完成后，我需要currencyTabs用完整的数组更新......

我了解 react 组件 props 如何从父级更新到子级，但我不太明白如何从纯 JS 中做到这一点。

我已经构建了一个组件，它将根据其在窗口中的尺寸和位置来确定其打开方向。我在 react-dom 节点上使用了 getBoundingClientRect() 函数。现在我已经更新了一些项目包，包括 react 和 react-dom 到 16.3.2。现在我得到一个编译错误：

Property 'getBoundingClientRect' does not exist on type 'Element | Text'

这是使用此功能的一段代码：

const node = ReactDOM.findDOMNode(this.containerElement);

if (!node) {
  return;
}

let vertical: Vertical_Direction;
if (verticalDirection === Vertical_Direction.DOWN_UP) {
  const windowHeight = window.innerHeight;
  const height: number = Math.min(containerHeight, node.getBoundingClientRect().height);

任何实现此功能的帮助或建议将不胜感激。

Edit2：这个问题的原因是更新@types/react-dom 到 16.0.5 版本。

ReactDOMServer.renderToString()我试图了解 React 16.8.6和React 16.8.6之间有什么区别ReactDOMServer.renderToStaticMarkup()。

这是我的理解：

\n

• renderToStaticMarkup()当您只想渲染标记而不想在客户端对其进行水合时，在服务器端使用。（https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup）

\n

• renderToString()当您想使用该函数来ReactDOM.hydrate()水合客户端的应用程序时，在服务器端使用。（https://reactjs.org/docs/react-dom-server.html#rendertostring）

\n

因此，如果我是对的，这两种方法之间的唯一区别是在应用程序的主要元素上renderToString()添加了。data-reactrootReact 在renderToStaticMarkup()文档中强调了这一点：

\n

与 renderToString 类似，只不过这不会创建 React 内部使用的额外 DOM 属性，例如data-reactroot。如果您想使用 React 作为简单的静态页面生成器，这非常有用，因为剥离额外的属性可以节省一些字节。

\n\n

如果您计划在客户端上使用 React 来使标记具有交互性，\n 不要使用此方法。相反，请在服务器上 使用renderToString并在客户端上使用ReactDOM.Hydrate() 。

\n

但是，我在 React 的存储库上阅读了这个问题，其中 Dan Abramov 说：

\n

相反，使用Hydro()显式告诉 React 水合现有的\n HTML。那么它就不会依赖于 data-reactroot 是否存在。

\n

和：

\n …

我们曾经使用 reactDom.render 进行测试。我们在尝试测试功能组件时开始遇到问题。在这些情况下，测试会在处理所有钩子之前继续进行。我开始寻找解决方案，我发现 react-testing-library 也实现了渲染功能。它似乎解决了问题。+ 在某些情况下使用 act()。

react-testing-library render() 的返回值是一个带有 html 容器的特殊对象，而不是 React 组件。在这种情况下，我们不能再使用 reactDom 测试工具，因为它们需要组件。

我对所有这些库有点困惑，不确定测试我们的应用程序的正确方法是什么。谁能详细说明两个库之间的区别？什么时候使用行为？（我发现这篇文章建议不要在渲染中使用行为：react-test-renderer's create() vs. @testing-library/react's render()）

谢谢！

错误：

TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function

Modal.js:14
  11 | 
  12 | 
  13 | function Modal(props) {
> 14 |   return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
  15 | }
  16 | 
  17 | 

编码：

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

const JSX_MODAL = (
  <div className="ui dimmer modals visible active">  
    <div className="ui standard modal visible active">
      THIS IS SOME TEXT IN THE MODAL // add some UI features here
    </div>
  </div>
);

function Modal(props) {
  return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
}

export default …

仅当状态值因上次更新而实际更改时，才会出现此问题。

在下面的例子中，当第一次点击按钮时，“setState”被调用了一个新值（12），并且发生了一个组件更新，这是可以理解的。

当我第二次单击同一个按钮时，将状态设置为相同的 12 值会导致组件重新运行（重新渲染），为什么会发生这种情况是我的主要问题。

任何后续设置为 12 相同值的 setState 都不会触发组件更新，这也是可以理解的。12 === 12 所以不需要更新。

那么，为什么第二次单击按钮时会发生更新？

export default function App() {
  const [state, setState] = useState(0);

  console.log("Component updated");

  return (
    <div className="App">
      <h1>Hello CodeSandbox {state}</h1>
      <button onClick={() => setState(12)}>Button</button>
    </div>
  );
}

代码沙盒示例

当我在 iOS Safari 中长按 React 应用程序上的工具栏按钮时，它会选择图标。我用工具栏上的 CSS 禁用了它：

-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;

但随后 Safari 会继续选择它能找到的下一个愚蠢元素。

因此，我最终将样式应用到应用程序的根目录，但现在用户当然无法选择段落等内容中的任何文本。

我真正想要的是一种设置屏障的方法，上面写着“Safari，你能停止尝试选择你可能找到的下一个东西吗？”

因此，在我的工具栏组件上，我执行了此操作并验证了它被调用：

  onTouchStart={e => {
    e.stopPropagation();
    e.preventDefault();
    e.bubbles = false;
  }}

我也尝试过这个：

  onTouchStartCapture={e => {
    e.stopPropagation();
    e.preventDefault();
    e.bubbles = false;
  }}

onSelect与,相同onSelectCapture。

然而，Safari 会忽略所有这些，并继续选择层次结构中的内容，一直到根 DIV，直到找到无意义的内容可供选择。当我通过复制查看它选择的内容时，它只是一个空格。

我缺少什么？我是否真的必须应用user-select: none;到根目录，然后选择性地允许在有意义的地方进行选择，例如包含文本的 DIV？那么，长按工具栏时，Safari 怎么会找不到并选择它呢？

import './App.css';
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/reset">
            <PasswordReset />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

你好，我收到一个错误。我是第一次运行反应应用程序。在“react-router-dom”中找不到“Switch”（导入为“Switch”）我尝试输入 Routers 而不是 Switch，但没有被接受。我能做些什么？谢谢。