My code:
var Counter = React.createClass({
getInitialState: function () {
return { clickCount: 0 };
},
handleClick: function () {
this.setState({clickCount: this.state.clickCount + 1});
},
render: function () {
return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
}
});
In ReactClass:
createClass: function (spec) {
debugger
var Constructor = function (props, context, updater) {
// This constructor gets overridden by mocks. The argument is used
// by mocks to assert on what gets mounted.
....
When I debug the createClass the spec.displayName is 'Counter'.
How did it come to be?
It's messing with me!
Related
Is it possible to make when someFunction or any inner function that call ReactDom.render use my function instead real implementation?
export const testHelperFunction = (widget, anotherArg) => {
jest.mock('react-dom', () => {
return {
__esModule: true,
render: console.log,
}});
widget.someFunction(anotherArg);
jest.unmock('react-dom');
};
I've got a little problem occurring with super and functions overriding the parent ones.
A simplified example of my problem is the following, having 2 files:
FileA.js
constructor () {
...
}
myFunction = () => {
...
}
FileB.js
class FileB extends FileA {
constructor () {
...
}
myFunction = () => {
if () {
// do something
} else {
super.myFunction()
}
}
render () {
return <button onClick={() => this.myFunction()}
}
}
First of all, if the else condition is invoked from FileB.js, an error is launched:
TypeError: (intermediate value).myFunction is not a function
But if I make the myFunction of FileB.js a non-arrow function, this one is never fired, and instead is fired the one from FileA.js.
Why is this happening and how to solve it?
I am trying to get the name of the parent function of the function being called.
For example if I have these functions:
var functions = {
coolfunction1: {
add: function () {
},
delete: function () {
},
save: function () {
}
},
coolfunction2: {
add: function () {
// i want to console.log() the name of the parent of this function,
// output: coolfunction2
},
delete: function () {
},
save: function () {
}
}
}
When I call functions.coolfunction2.add(), is there a way to log the name of the parent function that was run?
I know I can use the variable this but that only outputs the names of the children functions, add(), delete(), save().
How can I know that the coolfuntion2 was run?
I know this can be done manually, by rewriting the function name in the add() function, but is there a way to get the name dynamically?
You can add a getter to those methods as
Object.keys(functions).forEach(t =>
Object.keys(functions[t]).forEach(t2 => {
var func = functions[t][t2]; //save a reference to function since it won't be a function anymore once a getter is assigned
Object.defineProperty(functions[t], t2, {
get: function() {
console.log(t); //print the name of parent property or grand-parent property, etc
//func();
return func; //return the reference to this function
}
});
})
);
Demo
var functions = {
coolfunction1: {
add: function() {
},
delete: function() {
},
save: function() {
}
},
coolfunction2: {
add: function() {
console.log("a is invoked");
},
delete: function() {
},
save: function() {
}
}
};
Object.keys(functions).forEach(t =>
Object.keys(functions[t]).forEach(t2 => {
var func = functions[t][t2];
Object.defineProperty(functions[t], t2, {
get: function() {
console.log(t);
//func();
return func;
}
});
})
);
functions.coolfunction2.add();
functions.coolfunction2.add();
functions.coolfunction1.add();
I have 2 components. How can I call fetchProjectList() method in createProject() method.
First component:
Vue.component('projects', {
template: '#projects-template',
data: function () {
return {
list: []
}
},
ready: function () {
this.fetchProjectList();
},
methods: {
fetchProjectList: function () {
resource.get().then(function (projects) {
this.list = projects.data;
}.bind(this));
}
}
});
Second component
Vue.component('createProjects', {
template: '#create-projects-template',
methods: {
createProject: function () {
resource.save({}, {name: this.name}).then(function () {
this.fetchProjectList()
}.bind(this), function (response) {
// error callback
});
}
}
});
You don't, or rather you shouldn't. components should not depend on other components in such a direct way.
You should either extract this method into a mixin, or keep it in it's own object which you import into each component.
Read up on the store pattern: http://vuejs.org/guide/application.html#State_Management
I am trying to use a mixin to subscribe/ unsubscribe to messages in my component, I have the below code, can anyone please tell me if there is a better way to do this rather than a push for each subscription?
UPDATED: keep getting error, Uncaught TypeError: this.subscribeToChannel is not a function
Thanks in advance
var Icon = require('../partials/Icon');
var React = require('react');
var postal = require('postal');
var basketChannel = postal.channel("basket"),
BasketService = require('../../services/BasketService'),
subscriptionsMixin = require('../mixins/subscriptionToChannelsMixin');
var BasketLauncher = React.createClass({
mixins: [subscriptionsMixin],
render: function() {
return (
<button className="pull-right" onClick={this.props.handleClick}>
<Icon type="user" /> {this.getPeopleCount()} People
</button>
);
},
updateBasketTotal: function() {
BasketService.getBasketTotal(function(data){
this.setState({
selectedPeopleCount: data.TotalMembers
});
}.bind(this));
},
componentDidMount: function() {
var comp = this;
comp.updateBasketTotal();
this.subscribeToChannel(basketChannel,"selectAll",function (data) {
BasketService.selectAll(data.selectAll, function () {
comp.updateBasketTotal();
});
});
this.subscriptions.push(
basketChannel.subscribe("updateBasketCount", function () {
comp.updateBasketTotal();
})
);
this.subscriptions.push(
basketChannel.subscribe("removePersonFromBasket", function (data) {
BasketService.removePerson(data.personId,function(){
comp.updateBasketTotal();
});
})
);
this.subscriptions.push(
basketChannel.subscribe("addPersonToBasket", function (data) {
BasketService.addPerson(data.personId,function(){
comp.updateBasketTotal();
} );
})
);
this.subscriptions.push(
basketChannel.subscribe("addArrayToBasket", function (data) {
BasketService.addPerson(data.arrayToPush,function(){
comp.updateBasketTotal();
} );
})
);
},
getPeopleCount: function(){
return this.state.selectedPeopleCount;
},
getInitialState: function() {
return {
subscriptions: [],
selectedPeopleCount:0
};
},
componentWillMount: function() {
var page = this;
}
});
module.exports = BasketLauncher;
Mixin:
var React = require('react');
var postal = require('postal');
var subscriptionsMixin = {
getInitialState: function() {
return {
subscriptions: []
};
},
componentWillUnmount:function() {
for (i = 0; i < this.subscriptions.length; i++) {
postal.unsubscribe(this.state.subscriptions[i]);
}
},
subscribeToChannel:function(channel,message,callback){
this.state.subscriptions.push(
channel.subscribe(message, callback)
);
}
};
It looks like your mixin is missing the export line
module.exports = subscriptionsMixin;
I wouldn't put native functions in a mixin (componentDidMount ...etc).
Keep those functions inside your class and put inner function like "basketChannel.subscribe" in the mixin.
Actually I would put the subscribtion object in the mixin itself and would attach the subscriptions functions as prototype.
Hope it helps
Edit: Idk if it's the source of your problem but you set getInitialState twice, once in your mixin and once in your class