npm i -S tslint tslint-config-airbnb tslint-config-prettier tslint-react prettier{
"extends": ["tslint:recommended", "tslint-config-prettier", "tslint-config-airbnb", "tslint-react"],
/* ... */
}Почему dispatch не срабатывает?
setProductComments(/* ... */);this.props.setProductComments(/* ... */);this.props.dispatch(setProductComments(/* ... */));const mapDispatchToProps = {
setProductComments,
};Зачем в Web-приложении может понадобиться решение вроде Redux?
class Main extends Component {
state = {
isInitializing: true,
isSignedIn: false,
user: null,
};
async componentDidMount() {
// тут достаем токен, например, из cookie
const token = storage.get(TOKEN_KEY);
if (token) {
// тут сетим токен в заголовки по-умолчанию библиотеки для HTTP-запросов
api.setHeader('Authorization', `Bearer ${token}`);
const user = await api.getUser();
this.setState({ user, isSignedIn: true, isInitializing: false });
} else {
this.setState({ isInitializing: false });
}
}
render() {
const { isSignedIn, isInitializing } = this.state;
// на время инициализации показываем ProgressBar
if (isInitializing) return <ProgressBar />;
return (
<code lang="html">
<Router>
<div id = 'content'>
{isSignedIn ? (
<React.Fragment>
<Route path='/feed' exact component={Feed} />
<Redirect from='/' to="/feed" />
</React.Fragment>
) : (
<React.Fragment>
<Route path='/' exact component={Auth} />
<Redirect from="/feed" to="/" />
</React.Fragment>
)}
</div>
</Router>
</code>
);
}
}const store = configureStore();
store.dispatch(init()); // начинаем процесс инициализации еще до монтирования приложения
ReactDOM.render(
<Provider store={store}>
<Main />
</Provider>, document.getElementById('main'),
);class Example extends React.Component {
ref;
render() {
return <div ref={node => this.ref = node} />;
}
}class Example extends React.Component {
ref;
createRef = node => this.ref = node;
render() {
return <div ref={this.createRef} />;
}
}justAdd = () => {
this.playMusic();
};render() {
const { report = {} } = this.props;
return (
<Fragment>
<Head>
<title>Doctor problem with {report.doctor.name}</title>
</Head>
{report && <ReportDetail showDetailButton={false} data={report} />}
</Fragment>
);
}get renderReports() { /* ... */ }handleChange = (e, key) => {
const value = e.target.value;
this.setState({
[key]: value,
});
};<Input
id="outlined-name" // зачем?
placeholder="Problem Summary"
value={reportTitle}
onChange={e => handleChange(e, "reportTitle")}
/>handleChange = e => {
const { name, value } = e.target;
this.setState({
[name]: value,
});
};<Input
id="outlined-name" // зачем?
placeholder="Problem Summary"
name="reportTitle"
value={reportTitle}
onChange={handleChange}
/>/components/ReportDetail/constants.js зачем?
Не писать же 4 условия?
if ($parent[0].tagName == 'A' && (/\.(gif|jpg|webp|png)$/i).test($parent.attr('href'))) {
// do something
}И как определить, что это не внешняя ссылка?
function getDomain(url) {
return url.replace('http://','').replace('https://','').split('/')[0];
}
function isExternal(url) {
return getDomain(location.href) !== getDomain(url);
}
if (isExternal($parent.attr('href')) {
// do something
}на разных экранах оттенок фона видео не совпадает с фоном сайта.
Кто-то сталкивался, можно решить эту проблему?
@import и url() в импортированном в проект css коде как import/require() и разрешает их.
Интересно в первую очередь сделать это с помощью .map()
var array = [
{ id: 1 },
{ id: 2 },
];
const obj = array.reduce((acc, el) => (acc[el.id] = el, acc), {});
console.log(obj); // { 1: { id: 1 }, 2: { id: 2 } }
console.log(obj[1]); // { id: 1 }