const datauri = new Datauri()
datauri.format('.png', imageBuffer)
console.log(datauri.content) //=> "data:image/png;base64,eGtjZA=="class SearchResults extends React.PureComponent {
render() {
const { target, results } = this.props
return (
<div className="SearchResults">
{_
.chain(results)
.map(word => word.split(target))
.map(parts => _.reduce(
parts,
(res, part) => res.length > 0
? [ ...res, <span className="highlight">{target}</span>, part ]
: [ part ]
,
[]
))
.map(word => <span className="word">{word}</span>)
.value()
}
</div>
)
}
}.map(word => word.split(target)).map(parts => _.reduce(
parts,
(res, part) => res.length > 0
? [ ...res, <span className="highlight">{target}</span>, part ]
: [ part ]
,
[]
)).map(word => <span className="word">{word}</span>)
class ListItem extends React.PureComponent {
handleClick = () => {
const { src, label, onClick } = this.props
return onClick(src, label)
}
render() {
const { src, label, onClick } = this.props
return (
<li onClick={onClick && this.handleClick}>
<img src={src} />
<span>{label}</span>
</li>
)
}
}<ListItem src="/uploads/0.png" label="Test" onClick={this.select} /><First
city={data.city}
handleClick={this.handleClick(data.city)}
/>handleClick = city => () => {
this.setState({
selectedCity: city,
});
};class First extends React.PureComponent {
handleClick = () => {
const { onClick, city } = this.props
return onClick(city)
}
render() {
const { onClick, city } = this.props
return (
<div className="first">
<button onClick={onClick && this.handleClick}>
click
</button>
<p>{city}</p>
</div>
)
}
}handleClick = () => {<input onBlur={handleBlur} />class TestComponent extends React.PureComponent{
constructor() {
super();
this.state = {
selectedCity: false,
};
}
handleClick = city => {
this.setState({
selectedCity: city,
});
};
render() {
return (
<div>
{locations.map((data, i) =>
<First
city={data.city}
onClick={this.handleClick}
/>
)}
<Second city={this.state.selectedCity} />
</div>
);
}
}const emptyContacts = {
address: '' ,
email: '',
}
var Contact = React.createClass({
getInitialState: function() {
return {
contactData: emptyContacts,
}
},
toggleContactsData: function(event) {
this.setState({
contactData: thsi.state.contactsData === emptyContacts
? { address: this.props.address, email: this.props.email, }
: emptyContacts
});
},
render:function() {
return (
<li className="contact" onClick={this.toggleContactsData}>
<img className="contact-image" src={this.props.image} width="68px" height="68px"/>
<div className="contact-info">
<div className="contact-name" >{this.props.name}</div>
<div className="contact-number" >{this.props.phoneNumber}</div>
<div>{this.state.contactData.address}</div>
<div>{this.state.contactData.email}</div>
</div>
</li>
)
}
});class Item extends React.PureComponent {
render() {
const { name, color } = this.props
return (
<li>
<b>{name} ({color})</b>
</li>
)
}
}
class ItemsList extends React.PureComponent {
render() {
const { items } = this.props
return (
<ul>
{items.map(item => (
<Item key={item.id} {...item} />
)}
</ul>
)
}
}Я пометил при вызове компонента его ref'ом и пнул его setState()
как правильно отследить клик по селектору? Передавать callback и в props компонента его обрабатывать?
value={this.state.value}addTodo() {
// ...
this.setState({todoName: ''});
}<Route path="/" component={App}>
<Route path="list" component={ListComponent} wrapperClass="wrapper--list" />
</Route>render() {
// routes - это массив роутов для текущей локации
// если взять за основу конфигурацию роутов, которую я привел выше,
// то при переходе по пути /list в массиве будет два элемента.
const { children, routes } = this.props
const wrapperClass = (_.findLast(routes, route => !!route.wrapperClass) || {}).wrapperClass
return (
<div className={wrapperClass}>
{children}
</div>
)
}let newState = Object.assign(state, {messages:action._data, loading:false});newState === state // true в вашем случае
function* myCancelableAction(someData) {
// вернет итератору промис и приостановит работу функции до следующего вызова next
// в нашем случае - функция продолжит выполнение, когда придет ответ сервера
const response = yield doAjaxRequest(someData)
yield dispatchSuccessAction(response)
}
const action = myCancelableAction();
const promise = action.next().value // fetch promise
promise.then(response => {
// если новых запросов не поступило
if(!newRequestIsComing) {
// мы можем передать значение в нашу функцию (через next)
console.log(action.next(response).value); // dispatched action
}
})class MyClickableComponent extends React.PureComponent {
construct(props, context) {
super(props, context)
this.state = {
isOpen: false,
}
}
handleClick = e => {
this.setState({ isOpen: true })
}
render() {
const { isOpen } = this.state
return (
<div>
<div onClick={this.handleClick }>click on me</div>
{isOpen && (
<b>opened!</b>
)}
</div>
)
}
}ReactDOM.render(
<div>
<Month />
<MyClickableComponent />
<Content />
</div>,
document.getElementById('root')
);// Я удалил все лишнее
class DelayedContainer extends React.PureComponent {
constructor(props, context) {
super(props, context)
this.chidrenRefs = {}
this.state = {
childrenStore: this.childrenArrToStore(React.Children.toArray(props.children))
}
}
removeChidren = (key) => {
const { childrenStore } = this.state
this.chidrenRefs = _.omit(this.chidrenRefs, key)
this.setState({
childrenStore: _.omit(childrenStore, key)
})
}
handleChildRef = (node, key) => {
this.chidrenRefs[key] = node
}
render() {
const { childrenStore } = this.state
return (
<div>
{_.values(childrenStore).map(child => {
return React.cloneElement(child, { ref: node => this.handleChildRef(node, child.key) })
})}
</div>
)
}// Компонент, который будем удалять с задержкой
// обратите внимание на метод doDefferedUnmount
// именно его мы будем вызывать
class SomeItem extends React.PureComponent {
doDefferedUnmount = () => {
console.log('doDefferedUnmount for ', this.props.word);
return new Promise(resolve => setTimeout(resolve, 200))
}
handleClick = e => {
const { id, onClick } = this.props
return onClick && onClick(id, e)
}
render() {
const { word } = this.props
return (
<button type="button" onClick={this.handleClick}>{word}</button>
)
}
}Компонент не удалялся из DOM и с ним можно было работать, выполнять какие-то функции и только когда моя функция возвращает true он удалял его из dom
<script type="text/babel" src="foo.js"></script>
// enable runtime transpilation to use ES6/7 in node
var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config;
try {
config = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
require('babel-register')(config);