react-dom

Should I use ref or findDOMNode to get react root dom node of an element?

那年仲夏 提交于 2020-01-01 04:19:13
问题 I'm on a situation where I want to make some dom-node size calculations (top, bottom and size properties of the rendered DOM node) What I'm doing right now, on the componentDidUpdate method is to call findDOMNode on this: componentDidUpdate() { var node = ReactDOM.findDOMNode(this); this.elementBox = node.getBoundingClientRect(); this.elementHeight = node.clientHeight; // Make calculations and stuff } This is working fine, but I'm a bit worried about performance, and react best practices.

Cannot resolve module 'react-dom'

三世轮回 提交于 2019-12-30 00:27:07
问题 I've seen few posts related to this type of error. But couldn't resolve in mine. My package.json: "react": "~0.14.7", "webpack": "^1.12.13", "react-hot-loader": "^3.0.0-beta.6", . . I'm getting following error on 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 But in the cmd line when I did npm -v react-dom I get 3.10.10. react-dom is there. But I wonder why it still gives

How to Deploy CRA to GitHub Pages Using React Router

 ̄綄美尐妖づ 提交于 2019-12-24 21:37:22
问题 I have been majorly trapped by this curve ball. I have a site built w/ create react app which I'd like to deploy to GitHub Pages, however, I've hit a blocker with React Router. I understand GitHub pages work flawlessly w/ static content, but: 1- what is the correct solution to deploy to GitHub pages with SPA using react router ? I tried all sort of configuration and none worked. my routes are configured as: Index.js import React from 'react'; import { render } from 'react-dom'; import {

How to communicate ReactDOM.render with other ReactDOM.render

落花浮王杯 提交于 2019-12-24 06:17:11
问题 I have a project that includes React applications and other HTML elements. It means: ReactDOM.render(<Element1/>, document.getElementById('element1') <some section with HTML /> ReactDOM.render(<Element2/>, document.getElementById('element2') The problem is to pass a variable/props/state from one ReactDOM.render to the other. How can I do this? I am currently using the global variable window , but after changing it does not refresh the data in the second ReactDOM.render. 回答1: In order for two

ReactDOM to render multiple elements using the same class at ones?

对着背影说爱祢 提交于 2019-12-22 09:49:45
问题 I have a multiple elements using the same class and having the same content. So I can I use ReactDOM to render them at ones instead of: ReactDOM.render( <Footer source="./data/nav.json"/>, document.getElementsByClassName('footer')[0] //mountNode ); ReactDOM.render( <Footer source="./data/nav.json"/>, document.getElementsByClassName('footer')[1] //mountNode ); ReactDOM.render( <Footer source="./data/nav.json"/>, document.getElementsByClassName('footer')[2] //mountNode ); It would be best if I

findDOMNode vs getElementById for plain DOM elements

强颜欢笑 提交于 2019-12-21 20:59:39
问题 I'm not quite sure there's a real answer to this question but I was wondering if it's better to find regular DOM elements in a React app by using a. refs and ReactDOM.findDOMNode or b. plain old document.getElementById 回答1: I would prefer the pattern of refs because it would encourage you not to add IDs to elements and therefore allow you to use multiple instances of a react component on a single page. The ref feature in react will get you the element rendered by that specific instance of the

Uncaught ReferenceError: React is not defined

醉酒当歌 提交于 2019-12-21 03:18:33
问题 Hi I know this type of question has been asked quite a few times but I couldn't get the answer. I am trying to write a React hello world example. I have only two files one app.jsx and another homepage.jsx. I am using webpack to bundle the files. But when I run the code I get Uncaught ReferenceError: React is not defined My homepage.jsx looks like this "use strict"; var React = require('react'); var Home = React.createClass({ render : function() { return ( <div className="jumbotron"> <h1>

Is Shrinkwrap preventing me from updating react and react-dom?

a 夏天 提交于 2019-12-13 03:37:15
问题 I am trying to update react from 15.4.2 to 16.2.0. Main dependencies I am concerned about is React and React-Dom. I am trying to run: npm uninstall --save react react-dom and then npm install --save react react-dom however I keep getting the message: UNMET PEER DEPENDENCY react@16.2.0 react-dom@16.2.0 so this makes me think it's a shrink or tied down dependency but can't seem to find it. I have tried to even remove react and react-dom from the dependencies in package.json. Still no avail. 回答1

ReactJS could not update state when used with Tabs

旧时模样 提交于 2019-12-13 03:30:22
问题 I have a react component with 3 tabs, and each tab contains a datatable which will be populated with the API call result on the basis of active tab. So everytime there will be a parameter which I pass with API call and display data accordingly. This is working great, I am getting data when I switch through tabs, but when I try to search from the datatable and then click on another tab I get the error as- Can't perform a React state update on an unmounted component. This is a no-op, but it

ReactDOM.findDOMNode() return null with refs

左心房为你撑大大i 提交于 2019-12-13 03:29:19
问题 ReactDOM is not working with refs. I want to sting html <b>abcd</b> append to body of modal, but it's not working. when I check console.log() of modal and modalBody , it return null . My code in under: class Header extends Component { constructor(props) { super(props); this.state = { this.state.modalSendResult: false }; } _open() { this.setState({ modal: !this.state.modal }); if (!this.state.modal) { this.appendNode(); } } appendNode() { let modal = ReactDOM.findDOMNode(this.refs.modal)