标签: react-dom

react-dom/server 可以在客户端工作吗？

我需要在客户端呈现顶级 html 标签（例如<html><head>...</head><body></body></html>）。结果将被注入到 iframe 中。在服务器上，我会使用renderToStaticMarkupfrom 的函数react-dom/server，但仅客户端react-dom没有此函数。

可以react-dom/server在最新版本的react（当前为15.3.0）中的客户端上运行吗？如果是这样，React 开发团队是否有任何迹象表明它将在未来版本中继续在客户端上受到支持？

javascript server-side client-side reactjs react-dom

spu*_*dly

lucky-day

5
推荐指数

1
解决办法

1917
查看次数

如何在reactjs中渲染JSON数据？

这是我的 people.js 文件。它包含两个人的数据。

var Data = [
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "ruben",
              "last": "dean"
            },
            "location": {
              "street": "3070 york road",
              "postcode": "LP0 5PG"
            },
            "email": "ruben.dean@example.com",
            "login": {
              "username": "crazydog764",
              "password": "kane",
              "sha256": "58841f853bffca51507549428aee2a6c14863c8219e5a4b563d58a5b97564c92"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/96.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/96.jpg"
            },
            "nat": "GB"
        },
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "daniel",
              "last": "king"
            },
            "location": {
              "street": "7618 taylor st",
              "postcode": 35059
            },
            "email": "daniel.king@example.com",
            "login": {
              "username": "silvergorilla983",
              "password": "1a2b3c4d",
              "sha256": …

Run Code Online (Sandbox Code Playgroud)

render reactjs react-dom

Nit*_*sht

lucky-day

5
推荐指数

1
解决办法

9999
查看次数

JSX 组件 + 危险的SetInnerHTML？

所以我在实现这个场景时遇到了麻烦：

从后端服务器，我收到一个 html 字符串，如下所示：

<ul><li><strong>Title1</strong> <br/> <a class=\"title1" href="title1-link">Title 1</a></li><li><strong>Title2</strong> <a class="title2" href="/title2-link">Title 2</a>

Run Code Online (Sandbox Code Playgroud)

通常，仅使用dangerouslySetInnerHTML.

但是，围绕a hrefhtml 中的标签，我需要将它们包装在组件中，如下所示：

<ModalLink href={'title'}>
    {Title}
</ModalLink>

Run Code Online (Sandbox Code Playgroud)

这是因为在包装a标签时，组件本质上添加了创建新子窗口的功能。

我想这是你需要在 Regex 上实现的东西，但我不知道从哪里开始。

javascript regex reactjs react-dom

Ale*_*dro

lucky-day

5
推荐指数

1
解决办法

2694
查看次数

此 node_modules 的 IE 11 中的语法错误

当这个 react 组件加载到网页中时，我在 IE 中遇到语法错误。有没有人遇到同样的问题？这是一个继承的包，来自node_modules的语法错误没有意义？

"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");

const wrapAnsi16 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${code + offset}m`;
};

const wrapAnsi256 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${38 + offset};5;${code}m`;
};

Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-dom

Nik*_*kar

lucky-day

5
推荐指数

2
解决办法

5075
查看次数

调用渲染与绘制 DOM？

我正在学习 React 并试图更好地了解生命周期和不同阶段。

我刚刚读到的一件事是“React 首先渲染然后挂载元素。在这种情况下渲染意味着调用类的 render()，而不是绘制 DOM”

我想我只是不明白这意味着什么。有人可以用简单的方式或例子来解释它吗？

提前致谢！

reactjs react-dom

Cus*_*Bun

lucky-day

5
推荐指数

1
解决办法

1902
查看次数

在 react-router-dom 中的某些页面上隐藏标题

有没有办法可以只为 React Router 中的某些路由隐藏我的页眉？我现在的问题是我的App组件呈现我的Main组件，其中包含 my BrowserRouter，而 myHeader在我的App组件中呈现，所以我无法根据路由路径呈现标题。

这是一些代码：

App.js

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Main from './Main';
import Header from './Header';
import Footer from './Footer';

const App = () => (
    <BrowserRouter>
        <Header/>
        <Main/>
        <Footer/>
    </BrowserRouter>
);

export default App;

Run Code Online (Sandbox Code Playgroud)

Main.js

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from './Home';
import Login from './Login';

const Main = () => (
    <main>
        <Switch>
            <Route …

Run Code Online (Sandbox Code Playgroud)

reactjs react-router react-dom react-router-dom

Ben*_*ick

lucky-day

5
推荐指数

2
解决办法

5488
查看次数

如何让 Next.js “看到” react-dom 包？

这是我的第一个 Next.js 项目，我遇到了一个奇怪的障碍。尽管我确信至少3次，我已经做出反应，DOM和反应，并安装了最新的，期间next，next build或next run与该消息的进程中止：

The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react-dom',

Error: Cannot find module 'react-dom/server',

和：

Error: > Build failed because of webpack errors.

阅读类似的问题，我做了一些建议实际上适合我的问题的事情，例如删除node_modules和执行yarn，重新安装react-dom和react，但这些都没有帮助。在 Now.sh（我计划在其上部署此站点）上部署也会返回错误。

这是我的package.json：

{
  "dependencies": {
    "next": "^9.0.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "scripts": {
    "dev": "next", …

Run Code Online (Sandbox Code Playgroud)

javascript node.js reactjs react-dom next.js

aac*_*chh

lucky-day

5
推荐指数

1
解决办法

1243
查看次数

React 下载先前渲染的待处理图像

_{（更新：之前我以为是React Router导致的这个问题，但是我把React Router从代码中剥离了，问题依旧，所以我彻底修改了这个问题。）}

情况：

我有分页页面，每页显示图像列表。（“页面”是指可见的完整内容，不是单独的 html 文件/url。）我想以有效的方式浏览这些页面。

问题：

如果我在页面中导航得足够快，则在导航到下一页之前，并非所有图像都会加载到当前页面中。我希望浏览器在导航到下一页时取消所有未完成的图像下载。但这不会发生，浏览器会保留所有未完成的图像等待下载，直到它们全部下载完毕。然后我导航到的页面的图像将被下载。这会导致很大的延迟和带宽浪费。

题：

是否可以取消下载上一页的“待处理”图像？

演示代码：

要对此进行测试，请使用浏览器开发人员工具中的“网络”选项卡。还要选择“禁用缓存”并将节流阀（开发人员工具中的下载速度）设置为“慢速 3G”之类的慢速，否则图像将被加载得太快也看到问题。然后浏览页面并看到待处理图像列表正在堆积，然后单击“禁用图像”按钮。然后，屏幕上将看不到任何图像，但浏览器仍然打开大量待处理的图像下载，这会浪费带宽并导致需要渲染新图像时出现延迟。

你可以在这里测试代码：https : //codepen.io/Devabc/pen/PowjqwZ

//This code is using imgur images to demonstrate.
class Page extends React.Component {
  state = {
    pageNr: 1,
    imagesEnabled: true
  };

  onLinkClick = event => {
    const number = event.target.dataset.value;
    console.log("Number: " + number);
    this.setState({pageNr: number});
  };

  onButtonClick = event => {
    console.log("toggling images");
    this.setState(prevState => {
      return {imagesEnabled: ! prevState.imagesEnabled};
    });   
  };
 
  render() {
    const links = _.range(0, 5).map(number => { …

Run Code Online (Sandbox Code Playgroud)

javascript performance reactjs react-dom

Dev*_*abc

2020 06-20

5
推荐指数

1
解决办法

1245
查看次数