I'm working with React and using React-Bootstrap components.
I found some issues in the React-Bootstrap library which I "fixed" (or "workarounded") by editing the react-bootstrap.js file. The problem is that if tomorrow a new version of react-bootstrap comes out, then I will have to copy-paste/re-write/whatever all the code I wrote in the react-bootstrap.js file to the new one. I don't want to do this, so I'm wandering if there is a way to modify the component classes (i.e. change the render function) provided by react-bootstrap without touching the react-bootstrap.js file. The problem is that I can't figure out how to do this, or at least I'm not finding easy to understand the inner working of the component classes. Any ideas on how could I accomplish this?
Thanks in advance!
You could use a wrapping component, that overrides methods of the original component after it's mounted:
function wrapComponent (originalComponent, override) {
return React.createClass({
componentDidMount: function () {
for (var property in override) {
if (override.hasOwnProperty(property)) {
this.refs.original[property] = override[property];
}
}
},
render: function () {
return this.transferPropsTo(
<originalComponent ref="original">{ this.props.children }</originalComponent>
);
}
});
}
var ConsoleSample = React.createClass({
// This method can still be used:
prefix: function (text) {
return "prefix: " + text;
},
// This method will be overridden:
output: function (text) {
console.log(this.prefix(text));
},
onClick: function () {
this.output("Hello world");
},
render: function () {
return <button onClick={this.onClick}>{ this.props.children }</button>
}
});
var Application = React.createClass({
render: function () {
var AlertSample = wrapComponent(ConsoleSample, {
output: function (text) {
alert(this.prefix(text));
}
});
return <div>
<ConsoleSample>This should console.log</ConsoleSample>
<AlertSample>This should alert</AlertSample>
</div>
}
});
React.renderComponent(<Application />, document.body.lastChild);
It's a simple hack though. I'd agree that the correct solution is to fork React-Bootstrap.
Related
I just started to learn ReactJS and done some tutorials. Have noticed that some write function and others do not. Some examples below. What is the difference? What should I use and when?
Render
With function
var $class$ = React.createClass({
render: function() {
return (
<div />
);
}
});
Without function
const $class$ = React.createClass({
render() {
return (
<div />
);
}
});
Update
With function
componentDidUpdate: function(prevProps, prevState) {
$END$
},
Without function
componentDidUpdate(prevProps, prevState) {
$END$
},
Default Props
With function
getDefaultProps: function() {
return {
$END$
};
},
Without function
getDefaultProps() {
return {
$END$
};
},
Those without the function keyword are the result of using the new shorter ES6 method definitions.
You can read more here: Method Definitions - JavaScript | MDN
As far as I am aware, there is no notable difference in behaviour between a shorthand definition and including the function keyword other than the former having reduced support across environments.
There are 3 react components, two of them inside of the first. The first component contains some state which used only in third component. When I update state from third component with callback react additionally update second component. But second component have no changes.
Why does this happen and how to avoid it?
here is my code:
var app = React.createClass({
displayName: 'app',
settingsChanged: function (value) {
console.log('app.settingsChanged');
this.setState({ settings: { value: value } });
},
getInitialState: function() {
return { settings: { value: 1 } }
},
render: function() {
return (
React.createElement('div', null,
React.createElement(component1),
React.createElement(component2, { settings: this.state.settings, settingsChanged: this.settingsChanged })
)
);
}
})
var component1 = React.createClass({
displayName: 'component1',
render: function () {
console.log('component1.render');
return (
React.createElement('div', null, 'component1')
);
}
})
var component2 = React.createClass({
displayName: 'component2',
tbValueChanged: function(e) {
this.props.settingsChanged(e.target.value);
},
render: function () {
console.log('component2.render');
return (
React.createElement('div', null,
React.createElement('div', null, 'component2'),
React.createElement('input', { value: this.props.settings.value, onChange: this.tbValueChanged })
)
);
}
})
In the console I see this:
component1.render app.js:27
component2.render app.js:42
app.settingsChanged app.js:5
component1.render app.js:27
component2.render app.js:42
http://jsfiddle.net/67m0z3ts/1/
Actually what's happening is a normal behaviour, once there is something changed in the main component, all components in that main one will be rendered again.
BUT the good news that you can change this default behaviour using shouldComponentUpdate(), which is true by default. Look at react.js documentation in advanced performance.
I hope that helps.
Good Luck
You can prevent React rendering with method shouldComponentUpdate.
So you have to add a these lines of code to your component1:
getInitialState : function(){
return {
shouldUpdate: true
}
},
shouldComponentUpdate: function(nextProps, nextState){
return nextState === this.state.shouldUpdate
},
And also Fiddle Link
I hope it will help you!
Thanks
I don't want to get into detail here, but in addition to other replies, you can try to enable the PureRenderMixin from React. From the docs:
Under the hood, the mixin implements shouldComponentUpdate, in which it compares the current props and state with the next ones and returns false if the equalities pass.
I have two JS files included in page as utility.js and utility1.js Code for utility.js
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text" ref="mytestinput" placeholder="Your name here" />!<br />
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('container')
);
}, 1000);
Code for utility1.js
var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
React.findDOMNode(HelloWorld.refs.mytestinput).focus();
},
render: function() {
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
return (
<div>
<input type="text" ref="myTextInput" />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
React.render(
<MyComponent />,
document.getElementById('container1')
);
The problem here is I want focus on input of HelloWorld Component of utility.js from utility1.js. I saw their is one method as findDOMNode for mounted components. But this code is not working for me. Can Somebody try this JS Fiddle here and let me know possible solution.
You need to create the global event system in order to allow both components communicate with each other if they are not in parent-child relationship. Here is more information about global event system
Here is the solution: jsfiddle
var CustomEvents = (function() {
var _map = {};
return {
subscribe: function(name, cb) {
_map[name] || (_map[name] = []);
_map[name].push(cb);
},
notify: function(name, data) {
if (!_map[name]) {
return;
}
// if you want canceling or anything else, add it in to this cb loop
_map[name].forEach(function(cb) {
cb(data);
});
}
}
})();
var HelloWorld = React.createClass({
componentDidMount: function() {
React.findDomNode(this.refs.mytestinput).focus()
},
...
});
or if your React.js is up-to-date, use this:
componentDidMount() {
this.refs.mytestinput.focus()
}
Refs are local to the component they are defined on, so HelloWorld.refs.mytestinput is not valid. Furthermore, since MyComponent and HelloWorld are part of two different React applications (created by two different calls to React.render), there's no built-in way to access the refs in HelloWorld from MyComponent. You would need to set some kind of global reference to the component, use message passing from one app to the other, emit events of some kind indicating the input should be focused, or use some other method of "global" communication.
Just use
this.refs.myTextInput
https://jsfiddle.net/e0cjqLu2/
I have the next component 'Father' that contains a 'Children' component in React js.
var Father = React.createClass({
render: function () {
return (
<div>
<Children/>
</div>
);
},
onUpdate: function(state) {
this.setState(state);
} });
I want to call the onUpdate function on the father from the children BUT without calling the 'Children' method 'componentDidUpdate' because I'm using that method for some other thing that breaks my application.
How can I do that?
Pass it down in properties. If you need to update only specific parts and prevent your children from updating, use the method shouldComponentUpdate
var Father = React.createClass({
render: function () {
return (
<div>
<Children onUpdateCallback={this.onUpdate}/>
</div>
);
},
onUpdate: function(state) {
this.setState(state);
}
});
var Child = React.createClass({
render: function () { ... },
shouldComponentUpdate: function (prevProps, prevState) { ... return false}
});
If your Children can't/shouldn't update while the Parent does, I think you are probably doing something wrong, but good luck.
Since React doesn't have any builtin way to manage document.title, I used to set it inside componentDidMount of my route handlers.
However now I need to amend the title based on state fetched asynchronously. I started putting assingments into componentDidUpdate, but every now and then I forget to put document.title assignment into some pages, and previous title sticks around until I finally notice it.
Ideally I'd like a way to express document.title declaratively, without having to assign it. Some kind of “fake” component would probably be most convenient, given that I want to be able to specify the document title at several nesting levels:
On top level (the default title);
On page level (for some of the pages, but not all);
Sometimes, on inner component level (e.g. user typing into a field).
Additional requirements:
Title specified in child should override title specified by parent;
Reliable (guarantees cleanup on route change);
Should not emit any DOM (i.e. no hacks with component returning <noscript>);
I'm using react-router but it's better if this component works with other routers too.
Anything I can use?
I wrote react-document-title just for that.
It provides a declarative way to specify document.title in a single-page app.
If you want to get title on server after rendering components to string, call DocumentTitle.rewind().
Features
Does not emit DOM, not even a <noscript>;
Like a normal React compoment, can use its parent's props and state;
Can be defined in many places throughout the application;
Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;
Works on client and server.
Example
Assuming you use something like react-router:
var App = React.createClass({
render: function () {
// Use "My Web App" if no child overrides this
return (
<DocumentTitle title='My Web App'>
<this.props.activeRouteHandler />
</DocumentTitle>
);
}
});
var HomePage = React.createClass({
render: function () {
// Use "Home" while this component is mounted
return (
<DocumentTitle title='Home'>
<h1>Home, sweet home.</h1>
</DocumentTitle>
);
}
});
var NewArticlePage = React.createClass({
mixins: [LinkStateMixin],
render: function () {
// Update using value from state while this component is mounted
return (
<DocumentTitle title={this.state.title || 'Untitled'}>
<div>
<h1>New Article</h1>
<input valueLink={this.linkState('title')} />
</div>
</DocumentTitle>
);
}
});
Source
I keep track of mounted instances and only use title given to the top DocumentTitle in the mounted instance stack whenever it updates, gets mounted or unmounted. On server, componentWillMount fires but we won't get didMount or willUnmount, so we introduce DocumentTitle.rewind() that returns a string and destroys state to prepare for next request.
var DocumentTitle = React.createClass({
propTypes: {
title: PropTypes.string
},
statics: {
mountedInstances: [],
rewind: function () {
var activeInstance = DocumentTitle.getActiveInstance();
DocumentTitle.mountedInstances.splice(0);
if (activeInstance) {
return activeInstance.props.title;
}
},
getActiveInstance: function () {
var length = DocumentTitle.mountedInstances.length;
if (length > 0) {
return DocumentTitle.mountedInstances[length - 1];
}
},
updateDocumentTitle: function () {
if (typeof document === 'undefined') {
return;
}
var activeInstance = DocumentTitle.getActiveInstance();
if (activeInstance) {
document.title = activeInstance.props.title;
}
}
},
getDefaultProps: function () {
return {
title: ''
};
},
isActive: function () {
return this === DocumentTitle.getActiveInstance();
},
componentWillMount: function () {
DocumentTitle.mountedInstances.push(this);
DocumentTitle.updateDocumentTitle();
},
componentDidUpdate: function (prevProps) {
if (this.isActive() && prevProps.title !== this.props.title) {
DocumentTitle.updateDocumentTitle();
}
},
componentWillUnmount: function () {
var index = DocumentTitle.mountedInstances.indexOf(this);
DocumentTitle.mountedInstances.splice(index, 1);
DocumentTitle.updateDocumentTitle();
},
render: function () {
if (this.props.children) {
return Children.only(this.props.children);
} else {
return null;
}
}
});
module.exports = DocumentTitle;
Take a look at the NFL's react-helmet.
class Layout extends React.Component {
constructor(props){
super(props);
document.title = this.props.title;
}
render(){
return(
<div>
</div>
);
}
}
and then <Layout title="My Title"/> that easy!
Try react-frozenhead, it's actually more sophisticated than react-document-title - it allows us change title, description and anything else in section.
Meanwhile, 3 years have gone! ;-)
If you want to manipulate other page headers than title (like description, canonical, etc.), react-document-meta NPM dependency could be a good thing to use.