Hiello!
I'm wondering whats wrong in the React example bellow or if React works differently than I thought?
I'm looking for a way to reuse the underlying html element for a child react component, when the parents are two different components.
In the example bellow, I would like the inside the Circle component to have the same element after renderC1 and renderC2 is called. For instance so that I could apply a transition css property to animate the color switch, like they would if I e.g. just changed the style directly on the element.
When I render the bellow, React always seems to generate different HTML elements, ref, key or id on the DIV (in the render function of Circle) doesn't help much.
So my questions: is it possible to get React to just reuse the DIV that gets rendered via C1 when C2 is rendered? I thought this was how React should work, optimizing the underlying HTML elements?
Something like:
var C1 = React.createClass({
render: function () {
return (
<Circle background="deeppink" onClick={renderC2}/>
);
}
});
function renderC1 () {
React.render(
<C1 />,
document.getElementById('mount-point'));
}
var C2 = React.createClass({
render: function () {
return (
<Circle background="salmon" onClick={renderC1}/>
);
}
});
function renderC2 () {
React.render(
<C2 />,
document.getElementById('mount-point'));
}
var Circle = React.createClass({
styler: {
width: "100px",
height: "100px",
mozBorderRadius: "50%",
webkitBorderRadius: "50%",
borderRadius: "50%",
background: 'hotpink'
},
componentWillMount: function() {
if (this.props && this.props.background &&
this.props.background !== this.styler.background) {
this.styler.background = this.props.background;
}
},
render: function() {
return (
{/* tried adding key, ref and id, but does not reuse element */}
<div onClick={this.props.onClick} style={this.styler}></div>
);
}
});
renderC1();
This is impossible. The DOM does not allow one element to be in two places at once. Attempting to put a DOM element in a new location will automatically remove it from the old location.
You can see that here. (or more visually, here)
var parent1 = document.createElement('div'),
parent2 = document.createElement('div'),
child = document.createElement('div'),
results = document.createElement('span');
document.body.appendChild(results);
parent1.appendChild(child);
results.textContent += child.parentNode === parent1; //true
parent2.appendChild(child);
results.textContent += ', ' + (child.parentNode === parent1); //false
Related
I have a parent Component which sends a list of data to a List component which in turn sends it to a Label Component to display each data as a label.
I want to be able to focus on the label element when i click on it so that the appropriate style is applied ..
Below is the gist :-
class ContainerComp extends React.Component {
constructor(props) {
super(props);
this.state = {
group: [1, 2, 3]
};
clickHandler = (name, ref) = > {
// I am able to get the DIV as a html element here but calling .focus() on it dosent change the style where as when i explictly add focus using chrome debugger for the element it works.
ref.focus() // not working
}
render() {
return ( <
ListComp group = {
group
}
onClick = {
clickHandler
} >
)
}
}
function ListComp(props) {
const data = props.group.map(... < label onClick = {} > )
return ( <
Label.. >
)
}
function Label(props) {
let ref = createref();
// on focus style for the component is defined in this component
// i am making use of css modules
return ( <
div ref = {
ref
}
onClick = (name, ref) >
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
How can we achieve such a functionality without having to pass a selected prop to the label component ? By default i would select the first element and keep the focus .. or we can make it configurable.
Usually for this I would use Redux and fire off an action which therefore sets the property of the component that needs change, and make a listener that will listen for that specific prop and change style accordingly.
In this situation, id just pass down the event handler to the child component (remember to not call it when you pass it down, so do:
{() => {eventHandler()}}
and then in the child component do:
onClick={this.props.eventHandler(e)}
You will use the event to identify which element triggered it and then apply the class/style/prop to it.
There was some problem with the Ref , I am not quite sure why but i changed it to use the useRef() hook.
Label Component
const elementRef = useRef(null);
return (
<div className={[externalStyle, styles.container].join(' ')} onClick={() => onClickEvent(itemName, elementRef)} ref = {elementRef} tabIndex={1}> // added tabIndex and also changed to useRef
Container Component
clickHandler = (name: string, ref) => {
ref.current.focus(); // volla it worked
}
I tried using the old form of Ref and also useRef() without null previously (el) => (const = el).
It works if some one has some explanation where i went wrong i will be happy to listen as i am able to wrap my head around. may be a nights sleep helped fix it :P
I have created a simple portal following a tutorial on this site: How to create a React Modal(which is append to `<body>`) with transitions?. The code for the simple portal is:
var Portal = React.createClass({
render: () => null,
portalElement: null,
componentDidMount() {
var p = this.props.portalId && document.getElementById(this.props.portalId);
if (!p) {
var p = document.createElement('div');
p.id = this.props.portalId;
document.body.appendChild(p);
}
this.portalElement = p;
this.componentDidUpdate();
},
componentWillUnmount() {
document.body.removeChild(this.portalElement);
},
componentDidUpdate() {
React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);
}
});
However rather than rendering the div created above as the parent it renders a div with an undefined id as the parent. I am wondering why this is the case and how I can remove it. Thank you
I think you need to pass portalId as a prop to Portal component. Which is undefined right now.
I have a problem. So, I'm making react component and I need tooltip with button. Tooltip is working, but I can't place it where I want(I mean in the centre of the button and above that).
When I consoled log that, it's showing mne that e.target.offsetLeft and e.target.offsetTop are 0, but I gave it margin from both sides.
But actually when I place this code which have to place tooltip, then whole tooltip is not displayed:
tooltip.style.left = options.x + (options.w / 2) - (tooltip.offsetWidth / 2) + "px";
tooltip.style.top = (options.y - tooltip.offsetHeight - 10) + "px";
And it's my whole code:
import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';
var Ink = require('react-ink');
import FontIcon from '../FontIcon/FontIcon';
var IconButton = React.createClass({
getInitialState() {
return {
iconStyle: "",
style: "",
cursorPos: {},
};
},
render() {
var _props = this.props,
...
globalTooltip = null,
...
function createTooltip(options) {
var tooltip = document.createElement("div");
tooltip.className = "tooltip";
tooltip.appendChild(document.createTextNode(_props.tooltip));
document.body.appendChild(tooltip);
tooltip.style.left = options.x + (options.w / 2) - (tooltip.offsetWidth / 2) + "px";
tooltip.style.top = (options.y - tooltip.offsetHeight - 10) + "px";
globalTooltip = tooltip;
console.log(options);
};
function showTooltip(e){
var options = {
w: e.target.offsetWidth,
x: e.target.offsetLeft,
y: e.target.offsetTop,
};
createTooltip(options);
};
function removeTooltip(e){
globalTooltip.parentNode.removeChild(globalTooltip);
};
return(
...
);
}});
ReactDOM.render(
<IconButton ... tooltip="aaaaa" />, document.getElementById('app')
);
And at this moment I can't even console log the options object :/
This is not a fix to the bug in your code, but I'm outlining some React principles and features that will help you solve your problems with just React (instead of mixing native DOM APIs and React APIs).
It is not advised to directly access the DOM elements using native DOM APIs when you are using React. Handling DOM is the job of React. That is what React is for. So if you modify/remove/insert elements from/into elements created using React, you are losing the whole advantage of that powerful library; minimal DOM change.
In simple words, if we modify the DOM elements created by React, and when React comes back and looks again to the DOM for performing its diffing algorithm, it is now something else, someone has altered it without React's knowledge; and React gets confused. Thus React fails do its optimization magics for what it is famous for.
To handle DOM nodes, React has a feature called Refs, which are essentially references to original DOM nodes. But you need to define it if you want to use it.
Example usage of ref:
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}
render() {
return (
<input ref={(input) => { this.textInput = input; }} />
);
}
}
In the above example, if you want the offsetWidth, offsetHeight or any other DOM properties of <input> element, you can access it by this.textInput.offsetWidth, this.textInput.offsetHeight etc. But treat them as read-only.
If you want to alter the styles:
add a style attribute to the element in your JSX and modify the inline styles using React State and Lifecycle methods.
<input
style={{ left: this.state.offsetTop, top: this.state.offsetTop }}
ref={(input) => { this.textInput = input; }}
/>
I also saw in your code that you're using .removeChild and .appendChild in order to hide/show tooltip. Instead of that make use of React's Conditional Rendering.
example:
render() {
return (
<div>
{this.state.showToolTip ? <Tooltip ... /> : null}
{/* ... other stuff ... */}
</div>
);
}
If we are using React, then we should use it for a purpose, rather than just to say we are using it.
I'm really new to React, and I'm pulling my hair out trying to solve what seems to me to be a simple problem. Here's a picture of the component I've built.
Color Picking Component
What I'm trying to accomplish seems trivial, but literally every article I've read explaining what to do has told me something different, and not one of the solutions has worked. It breaks down to this: When a user clicks on a tag, it builds out a tray and loops through an array of colors to build color buttons. When a color button is clicked it needs to pass which color was clicked to its parent component and run a function to update its color. I've read about flux, event bubbling, binding "this" to a property, and none of those solutions has seemed to work. The React docs are basically useless for a newbie like myself. I want to avoid complicated event structures like flux at this point since I'm appending some simple components to an existing app that I didn't write in React originally.
Also, PS, This code is in JSX which makes much more sense to me than straight JS react. Thanks in advance for your help!
var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];
var EditDrawer = React.createClass({
updateColor: function() {
console.log("New Color: " + i);
},
render: function(){
var passTarget = this;
return (
<div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
<div className="row">
<div className="col-xs-12">
{colorsArray.map(function(object, i){
return <ColorButton buttonColor={object} key={i} />;
})}
</div>
</div>
</div>
);
}
})
var ColorButton = React.createClass({
render: function(){
var buttonStyle = {
backgroundColor: this.props.buttonColor,
};
return (
<div className="tag-edit-color-button" style={buttonStyle} >
</div>
)
}
})
The callback function should work. As you've mentioned in your previous comment you can use your captured this to access the updateColor function from the child:
var passTarget = this;
...
...
return <ColorButton
buttonColor={object}
key={i}
update={passTarget.updateColor} />
Or as Bogdan mentioned you can pass it through map after your callback function:
{colorsArray.map(function(object, i){
return <ColorButton
buttonColor={object}
key={i}
update={this.updateColor} />;
}, this)}
Your <ColorButton /> component should then be able to run a simple onClick function:
onClick={this.props.update}
And then you can simply make use of normal event targets in the parent component to capture the color of the button that was clicked:
updateColor: function(e) {
console.log(e.target.style.backgroundColor);
}
Here is a full DEMO to demonstrate.
You can just pass callback function into child from your parent component, as simple as this:
<ColorButton buttonColor={object} key={i} onColorSelect={this.updateColor}/>
(when using React.createClass all class methods are already bound to this, so you are not required to call .bind(this)).
Then from ColorButton component you can call this callback as this.props.onColorSelect(...).
JS Bin example: http://jsbin.com/fivesorume/edit?js,output
OK, this is pretty simple in React without using flux or redux, similar to passing down props from parent to child, here we can use callback function like this:
var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];
var EditDrawer = React.createClass({
updateColor: function(i) {
alert("New Color: " + i);
},
render: function(){
return (
<div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
<div className="row">
<div className="col-xs-12">
{colorsArray.map(function(object, i){
return <ColorButton buttonColor={object} key={i} updateColor={this.updateColor}/>;
}, this)}
</div>
</div>
</div>
);
}
});
var ColorButton = React.createClass({
updateColor: function() {
this.props.updateColor(this.props.buttonColor);
},
render: function(){
var buttonStyle = {
backgroundColor: this.props.buttonColor,
};
return (
<div className="tag-edit-color-button"
style={buttonStyle}
onClick={this.updateColor}>
this.props.buttonColor
</div>
)
}
});
I have a grid of components with 3 per row.
They are divs which represent a product and have inner components such as price and description. These products sometimes have longer titles which push the other components downward.
This is fine, but when it happens I want the titles for the other components in the same row to have a height the same, so that the next components (price, rating) are vertically aligned. So the price for each product in a row will be the same.
Then, I want to make the height of the row the max height of the three elements in the row.
Is there a good way I can manipulate the height of elements dynamically which will work with react?
I would inject a function in all child components which is called after the child component is rendered.
Example:
var Product = React.createClass({
componentDidMount: function() {
var height = 200; // calculate height of rendered component here!
// set height only one time
if (this.props.findHeight) {
this.props.setHeight(height);
}
},
render: function() {
return <div style={{height:this.props.height,backgroundColor:'green'}}>
Product
</div>;
}
});
var Main = React.createClass({
getInitialState: function() {
return {
maxHeight:0,
findHeight: true
}
},
componentDidMount: function() {
this.setState({
maxHeight: this.state.maxHeight,
findHeight: false
});
},
setMaxHeight: function(maxHeight) {
if (maxHeight > this.state.maxHeight) {
this.setState({maxHeight: maxHeight})
}
},
render: function() {
return (<div>
<Product setHeight={this.setMaxHeight} height={this.state.maxHeight} findHeight={this.state.findHeight} />
</div>);
}
});
The logic how to calculate the actual height of a component is a different question. You can solve it e.g. with jQuery (How to get height of <div> in px dimension). Unfortunately I can not answer the question for vanilla js, but I am sure that you find the answer very fast when you ask google :-)
Greetings
By extending the answer provided by CapCa, you can get the actual height of the component by Element.getBoundingClientRect().
let domRect = element.getBoundingClientRect();
You can also target the top element of your targeted react component by using React Ref. Your code could be like this,
let domRect = this.TargetedElementRef.getBoundingClientRect(),
elementHeight = domRect.height,
elementWidth = domRect.width; // you can get the width also