I have a component which, in componentDidMount, gives a jQuery plugin some control over the DOM rendered by React. I know everyone says "never let anything but React touch the DOM", but hear me out, as reinventing this plugin is not feasible right now, and I think there should be an "overwrite whatever you find in the DOM" switch for React that I hope someone can point me to.
More info: I've designed it so the state of the React's DOM is entirely determined from the props given to React except while the user is dragging things around. Once dropped, I don't care how the DOM changed since the last React update, I just want to render everything from the current props of React, which I am passing in on the plugin's change handler via ReactDOM.render
The symptoms are that the nodes created by the plugin during and after dragging don't go away after React is told to update!
Yes, the nodes are key-ed initially.
The plugin is Nestable, and it adds interactivity (drag-drop reordering of the tree), and a JSBin is here: http://jsbin.com/qareki/edit?js,console,output
I'm really looking for the "Kill whatever you find" setting. I thought calling ReactDOM.render would do it, but it's clearly not doing it. Neither of course, was the more surgical setState, but I didn't expect it to. Thanks in advance for all 'you're doing-it-wrong' advice and other fixe
Manually add a div element in componentDidMount and replace it with a new one in componentDidUpdate:
class Foo extends React.Component {
render() {
// whatever HTML you want...
return (
<div>
<div>
{/* this div will contain our non-React stuff that we need to reset */}
<div ref="container"></div>
</div>
</div>);
}
blastAndRecreate() {
// throw away any content within the container and replace it with brand new content
const container = $(this.refs.container).empty();
const newDIV = $("<div>").appendTo(container);
// give this new DIV to nestable plugin
newDIV.nestable(...);
}
componentDidMount() {
this.blastAndRecreate();
}
componentDidUpdate() {
this.blastAndRecreate();
}
}
Related
Using React & material-ui, I have a pretty big tab container and want to keep data fetches local to each Tab component. I want to be able to essentially greedy load some of the Tab components so as soon as the Tab container is mounted, the Tabs with a greedyLoad prop passed to them are mounted (although not the active tab/visible) and make the fetch for the data they need.
The reason is some of the tabs need a count from the data I fetch in the tab label.
I understand I can fetch the data from the parent component and pass the data as a prop downwards, but I really would like to keep the fetch’s local to each tab component. I’ve seen it done at a previous company I worked at and totally forgot how it worked. Something with CSS I think. Thanks in advance
If you hide the component with CSS, your component will mount on the DOM, but it will be invisible to the user. We just need to add some inline css and make use of the display: none property
function myComponent(show) {
// TODO: fetch the data
return (
<div style={{display: show ? "block" : "none"}}>
<h1 >This component may be invisible!</h1>
<p>{data}</p>
</div>
);
}
I get the following warning when rendering my component:
Warning: A component is contentEditable and contains children
managed by React. It is now your responsibility to guarantee that none
of those nodes are unexpectedly modified or duplicated. This is
probably not intentional.
This is my component:
import React, { Component } from "react";
export default class Editable extends Component {
render() {
return (
<div contentEditable={true} onBlur={this.props.handleBlur}>
{this.props.children}
</div>
);
}
}
What is the potential problem with my code that React wants to warn me about? I did not quite understand from reading the documentation at https://reactjs.org/docs/dom-elements.html.
I imagine that my component should work exactly like an managed input field, without any problem:
this.props.children is initial value
the onBlur callback updates the props from event.target.innerHTML
the component is rendered with the new props
Setting the contenteditable html attribute allows the contents of that element to be modified in the browser. React is warning you that you have children within that element that are managed by React. React only works from the top down. Meaning it manages a model at the top level and maintains a virtual DOM representing that data, then renders the DOM tree based on that virtual DOM. Any changes you make to the DOM outside of React (such as setting contenteditable and allowing the content to be edited by a user directly in the browser) will be potentially blown away or cause problems for React when it goes to update those managed elements.
In your situation you don't care that the {this.props.children} node gets blown away because you know you're catching the changes and doing what you need to with it. It's just warning you that you better not expect that node to remain intact and accurately updated by React when you're letting the content be edited by the browser directly.
If you know what you're doing (and for now it looks like you do) then you can suppress that warning by adding suppressContentEditableWarning={true}.
Thanks #Chev! It fixed the warnings..
<p
className={editing ? 'editing' : ''}
onClick={editOnClick ? this.toggleEdit : undefined}
contentEditable={editing}
ref={(domNode) => {
this.domElm = domNode;
}}
onBlur={this.save}
onKeyDown={this.handleKeyDown}
{...this.props}
suppressContentEditableWarning={true}
>
{this.props.value}
</p>
I can't find any documentation for how this should be done with the <Navigator/> component... Basically, when one of my scenes loads, I want to be able to, say, pass a route.navBarColor to my navigator that will automatically change the background color of the bar.
I have tried pushing a route with {navBarColor: 'red'}, etc... to renderScene(), but this does not work because renderScene() doesn't seem to have a reference to this, and when I bind(this) it, the entire scene does not render, and throws a Stack Overflow error.
Basically, I want to do something like this:
navigator.push({name: 'TestScene', navBarColor: 'transparent'})
Which then goes to
renderScene(route, navigator) {
if(route.navBarColor) {
this.setState({navBarColor: navBarColor});
} ... etc.
}
Where this.state.navBarColor is used to set the backgroundColor prop of the navigationBar.
Is this possible with the Navigator component? I see that it appears to be with NavigatorIOS, so I don't understand why it wouldn't be here.
Thanks!
The Navigator component has no display of its own, it only manages the scene transitions and routing, so asking how to do this "with Navigator" is not right. This is contrasted with NavigatorIOS which dictates the display as well.
Your question mentions "NavigationBar", is that React Native Navbar?
If yes, somewhere in the renderScene() function there will be a reference to the component, you simply need to pass it the appropriate navBarColor prop.
<NavigationBar statusBar={{ tintColor: route.navBarColor }} />
I'm trying to access the componentWillMount hook in order to fade out a canvas element that is not a child of the transitioning <Home> component. (Animation of <Home> itself works as expected.)
<ReactCSSTransitionGroup transitionName="screenTrans" transitionEnterTimeout={200} transitionLeaveTimeout={3000}>
<Home key={'home'} />
</ReactCSSTransitionGroup>
Home.js:
export default class Home extends React.Component {
...
componentWillLeave( callback ) {
console.log( "am i getting called?" ) // no!
this.fadeOutCanvas();
}
}
What am I missing? Thanks...
Quite late answer but I'm now facing the same problem.
The thing is that you're using ReactCSSTransitionGroup which does NOT call the callbacks like ReactTransitionGroup (different component). The problem is that you would need a component that does both (sets css AND calls your callback)
From the docs:
When using ReactCSSTransitionGroup, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level ReactTransitionGroup API which provides the hooks you need to do custom transitions.
Checked around and I couldn't find anything, so I'll write my own component and hopefully open source it!
I am adding components to a panel at runtime:
Ext.define("MyApp.view.SomePanel",{
extend:'Ext.panel.Panel',
...
setGridList:function(gridIds) {
myItems=[];
Ext.each(gridIds,function(gridId){ myItems.push(Ext.getCmp(gridId) || Ext.create("Ext.grid.Panel",{id:gridId}))});
Ext.applyIf(me,{items:myItems});
}
});
It works well when called for the first time, from the initComponent. But it does not work when called from a store load handler. My best guess is that I have to refresh the view, rebuild the layout or sth. like that!? But I don't find such a thing in the docs.
Anyone here knows the trick?
If your class MyApp.view.SomePanel is an Ext component, than you could use the Container.add() or Container.remove().
If the child is not automatically added, call the Container.doLayout() method.
PS: the layout of your class should support multiple children.