for(let i = 0; i < input.files.length; i++) {
const r = reader[i] = new FileReader();
r.addEventListener('load', () => {
document.querySelectorAll('.blah3')[i].setAttribute('src', r.result);
});
r.readAsDataURL(input.files[i]);
}Object.getOwnPropertyNames(foo).forEach(function(prop) {
Object.defineProperty(
bar,
prop,
Object.getOwnPropertyDescriptor(foo, prop)
);
});const stream = require('stream');
const fs = require('fs');
class PercentWatcher extends stream.Duplex {
constructor(fd) {
super();
this.size = fs.fstatSync(fd).size;
this.handled = 0;
}
_read() {}
_write(chunk, encoding, callback) {
this.push(chunk);
this.handled += chunk.length;
console.log(`\n\n${Math.round(this.handled / this.size * 100)}%\n\n`);
callback();
}
}
const fd = fs.openSync('file.txt', 'r');
fs.createReadStream(null, {fd}).pipe(new PercentWatcher(fd)).pipe(process.stdout);<h1>Hello World!</h1> преобразуется в React.createElement("h1", null, "Hello World!") () => console.log('res') ну или console.log.bind(console, 'res') class Publication extends React.Component {
state = {
list: []
};
componentDidMount() {
this.timer = setInterval(() => {
this.setState({list: [...this.state.list, new Date().toString()]});
}, 10000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
static childContextTypes = {
list: React.PropTypes.array
};
getChildContext() {
return {
list: this.state.list
};
}
render() {
return (
<div>
<h4>Publication</h4>
{this.props.children}
</div>
);
}
}
const PublicationList = (props, context) => (
<ul>
{context.list.map(e => <li key={e}>{e}</li>)}
</ul>
);
PublicationList.contextTypes = {list: React.PropTypes.array};для каждого из них создавать свой редьюсер, экшен, константыДостаточно просто
export connect(state => ({list: state.publication.list}))(PublicationList)class Calc extends React.Component {
state = {
valueA: 0,
valueB: 0
};
handleChange = ({target: {name, value}}) => {
if (name) this.setState({[name]: value});
};
render() {
return (
<div onChange={this.handleChange}>
<input type='text' name='valueA' value={this.state.valueA}/>
<input type='text' name='valueB' value={this.state.valueB} />
</div>
);
}
}const App = props => (
<div>
<Link to='/'><h1>App</h1></Link>
<Link to='/news'> News </Link>
<Link to='/about'> About </Link>
{props.children}
</div>
);
const Modal = props => (
<div>
<h3>Modal</h3>
<p>{props.data}</p>
<button onClick={props.onClick}>close</button>
</div>
);
const withModal = Component => props => (
<div>
<Component {...props} />
{props.params.id != undefined && <Modal data={props.params.id} onClick={() => {
props.router.goBack();
}}/>}
</div>
);
const News = withModal(props => (
<div>
<h2>News</h2>
<Link to='/news/1'>modal</Link>
{props.children}
</div>
));
const About = withModal(props => (
<div>
<h2>About</h2>
<Link to={{pathname: '/news/1', state: 'about'}}>modal</Link>
{props.children}
</div>
));
const modalStates = {
'about': About
};
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='news' component={News} />
<Route path='about' component={About} />
<Route path='news/:id' getComponent={(nextState, cb) => {
let Component = News;
const {state} = nextState.location;
if (state && state in modalStates) Component = modalStates[state];
cb(null, Component);
}} />
</Route>
</Router>,
document.body
);componentWillReceiveProps(nextProps) {
if (nextProps.complete && !this.props.complete) this.sendRequest();
}
shouldComponentUpdate(nextProps) {
const changed = Object.keys(nextProps).filter(e => nextProps[e] !== this.props[e]);
if (changed.length == 1 && changed[0] == 'complete') return false;
}function asyncLoop(fn, i, end) {
if (i < end) fn(i, () => asyncLoop(fn, i + 1, end));
}
function worker(i, next) {
client.hgetall('space' + i, (err, obj) => {
if (err) return; // break
next();
});
}
asyncLoop(worker, 0, 9);let p = Promise.resolve();
for (let i = 0; i < 9; i++) {
p = p.then(() => new Promise((resolve, reject) => {
client.hgetall('space' + i, (err, obj) => {
if (err) reject(err); // break
else resolve();
});
}));
}
p.catch(err => console.error(err));<TestContent name={Test2} />
...
class TestContent extends Component {
render() {
var data={name:"какие-то данные для вывода в выбранном компоненте"};
var Name = this.props.name;
return(
<div>
<Name data={data} />
</div>
)
}
}