标签: react-dom

我正在使用Leaflet(通过react-leaflet)开发应用程序.Leaflet直接操作DOM.react-leaflet库不会改变它,它只是为您提供了React组件,您可以使用这些组件以反应友好的方式控制Leaflet映射.

在这个应用程序中,我想使用自定义地图标记,这些标记是包含一些简单元素的div.在Leaflet中执行此操作的方法是将标记的icon属性设置为DivIcon,您可以在其中设置自定义HTML.您可以通过将DivIcon的html属性设置为包含HTML的字符串来设置内部HTML.就我而言,我希望从React组件呈现HTML.

为了做到这一点,似乎正确的方法是使用ReactDOMServer.renderToString()在地图标记内将我想要的Component渲染成一个字符串,然后我将其设置为htmlDivIcon 的属性:

MyMarker.js:

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { Marker } from 'react-leaflet'
import { divIcon } from 'leaflet'

import MarkerContents from './MarkerContents'

export class MyMarker extends Component {
  render() {
    const markerContents = renderToString(<MarkerContents data={this.props.data} />)
    const myDivIcon = divIcon({
      className: 'my-marker',
      html: markerContents
    })

    return (
      <Marker
        position={this.props.position}
        icon={myDivIcon} />
    )
  }
} …

我在 JSConf 冰岛看到了 Dan Abramov 的演示项目，但我不明白他为什么flushSync在这段代码中使用：

  import { flushSync } from 'react-dom';

  debouncedHandleChange = _.debounce(value => {
    if (this.state.strategy === 'debounced') {
      flushSync(() => {
        this.setState({value: value});
      });
    }
  }, 1000);

lushSync 在 React 中做了什么？

我见过很少与此类错误相关的帖子.但我的解决方法无法解决.

我的package.json:

"react": "~0.14.7",
"webpack": "^1.12.13",
"react-hot-loader": "^3.0.0-beta.6",
.
.

我在webpack上遇到以下错误:

ERROR in ./public/src/main.js
Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src 
@ ./public/src/main.js 19:16-36

但在我做的时候在cmd线上

npm -v react-dom

我得到3.10.10.react-dom就在那里.但我想知道为什么它仍然会出现这个错误.

当我通过npm"npm install react-dom"安装react-dom时,运行webpack我得到以下错误:

ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72

ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72

ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Cannot resolve …

嗨我在安装react-dom模块时遇到问题.

我可以在Windows 10. 64位机器上安装其他模块,如react express modules

npm install react-dom
npm WARN package.json -panel-client@1.0.0 No description
npm WARN package.json -panel-client@1.0.0 No repository field.
npm WARN package.json -panel-client@1.0.0 No README data
npm WARN package.json -panel-client@1.0.0 No license field.
npm WARN retry will retry, error on last attempt: Error: EBUSY: resource busy or locked, rename 'C:\Users\NOI-DE~1\AppData\Local\Temp\npm-3064-f12f714d\registry.npmjs.org\react-dom\-\react-dom-0.14.8.tgz.2090210803' -> 'C:\Users\NOI-DE~1\AppData\Local\Temp\npm-3064-f12f714d\registry.npmjs.org\react-dom\-\react-dom-0.14.8.tgz'
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-dom"
npm ERR! node v4.4.3
npm ERR! npm  v2.15.1

npm ERR! …

在我运行Jest单元测试时升级到React后出现此错误:

React取决于requestAnimationFrame.确保在旧版浏览器中加载polyfill.

我如何解决它？

我正在使用Jest 18.1.0.

为什么我在下面收到此错误？我的陈述ReactDOM.render(<App />, container);是100%合法的代码.

我的github回购:https://github.com/leongaban/react_starwars

app.js文件

import react from 'react'
import ReactDom from 'react-dom'
import App from 'components/App'

require('index.html');

// Create app
const container = document.getElementById('app-container');

// Render app
ReactDOM.render(<App />, container);

组件/ App文件

import React from 'react'

const App = () =>
  <div className='container'>
    <div className='row'>

    </div>
    <div className='row'>

    </div>
  </div>;

export default App; 

我的webpack.config

const webpack = require('webpack');
const path = require('path');

module.exports = {
entry: [
  './src/app.js'
],
output: {
  path: path.resolve(__dirname, './build'), …

根据反应单元测试文档：

行为（）

要为断言准备组件，请将呈现该组件并在 act() 调用内执行更新的代码包装起来。这使得您的测试运行更接近 React 在浏览器中的工作方式。

但测试在这两种情况下都运行得很好：

没有 act()

it('Should return some text', () => {
  render(<TestComponent />, container);
  expect(container.textContent).toBe('some text');
});

与行为（）

it('Should return some text', () => {
  act(() => {
    render(<TestComponent />, container);
  });

  expect(container.textContent).toBe('some text');
})

问题是：act() 到底有什么作用，什么时候应该使用它？

我在componentDidMount中有 React 组件从服务器获取数据。问题是componentDidMount被调用了两次，API 也被调用了两次。我有一个视图增量 API，例如 YouTube 视频视图，由于两次 API 调用，在数据库中增量两次。

class SingleVideoPlay extends React.Component {
    constructor(props) {
        super(props);
        this.player = React.createRef();
    }
    state = {
        autoPlay: true,
        relatedVideos: [],
        video: null,
        user: null,
        comments: [],
        commentInput: {
            value: '',
            touch: false,
            error: false
        },
        following: false,
        tab: 'comments'
    };
    _Mounted = false;

    componentDidMount() {
        this._Mounted = true;
        if (this._Mounted) {
            const videoId = this.props.match.params.id;
            this.getVideoDetails(videoId);
        }
    }
    componentWillUnmount() {
        this._Mounted = false;
        try {
            clearInterval(this.state.videoInterval);
            this.props.videoEditUrl('');
        } catch …

嗨,我知道这类问题已被问过很多次,但我无法得到答案.

我正在尝试编写一个React hello world示例.我只有两个文件,一个是app.jsx,另一个是homepage.jsx.我正在使用webpack捆绑文件.

但是当我运行代码时,我得到了 Uncaught ReferenceError: React is not defined

我的homepage.jsx看起来像这样

"use strict";

var React = require('react');

var Home = React.createClass({
    render : function() {
        return (
            <div className="jumbotron">                
                <h1> Hello World</h1> 
            </div>
        );
    }
});

module.exports = Home;

我的app.js看起来像这样

var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
  <Home/>,
  document.getElementById('app')
);

在浏览器中,它会抛出Uncaught ReferenceError: React is not defined第7行,即我需要主页的位置.

但是当我在app.jsx中添加var React = require('react')时它工作正常.

我不明白这一点.我在homepage.jsx中包含了反应,我正在使用它.在app.jsx我只需要react-dom因为我不使用React.那么为什么它在app.jsx中给出错误.

请帮助!!

我的 React 组件渲染了两次。所以，我决定逐行调试，问题就在这里

 if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

React-dom.development.js

是因为严格模式吗？我可以禁用它吗？什么是严格模式？我需要吗？