const breadCrumbsItems = [
{
title: 'Home',
path: '/',
},
{
title: 'Products',
path: '/products',
},
{
title: 'Iphone 6s Black',
},
];
<BreadCrumbs items={breadCrumbsItems} />
<Wrapper>
{items.map((item, i) => (
<BreadCrumbsItem
key={item.path}
active={i === items.length - 1}
path={item.path}
>
{item.title}
</BreadCrumbsItem>
)}
</Wrapper>
<BreadCrumbs>
<BreadCrumbs.Item path="/">Home</BreadCrumbs.Item>
<BreadCrumbs.Item path="/products">Products</BreadCrumbs.Item>
<BreadCrumbs.Item active>Iphone 6S Black</BreadCrumbs.Item>
</BreadCrumbs>
class SomePage extends React.Component {
componentDidMound() {
this.props.fetchSomeData();
}
handleSomeEvent = () => {
doSomething();
};
render() {
const { data } = this.props;
return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
}
}
class SomeOtherPage extends React.Component {
componentDidMound() {
this.props.fetchSomeOtherData();
}
handleSomeEvent = () => {
doSomethingOther();
};
render() {
const { data } = this.props;
return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
}
}
class CalendarDay extends Component {
state = { data: [] };
comonentDidMount() {
// тут делаем запрос к БД и передаем данные в состояние
}
// ...
}
console.log(JSON.stringify(db));
проблема в том что сейчас есть инфа по всем годам например. ткунули в год, подложили другую сущность, котрая благополучно храниться в памяти и опля. Когда там этого дела не будет, нужно чтобы ссылка запускала фетч.
подкладывать промисы в котрых ифить если есть отдать если нет, сходить туда то? тут я получиться скорее всего намешаю заные архитектурные слои в кучу
как рендерить в асинхронном режиме? в англяре был async pipe . как это сделать в рекате чтобы на неделю не улететь в оверинженирирг не знать.
class Example extends React.Component {
state = { isFetching: false, error: null, data: [] };
// ...
render() {
if (isFetching) return <Preloader />;
if (error) return <Error error={error} />;
return data.map(/ ... /);
}
}
Как правильно и корректно делать релейшены сущностей?
{
posts: [],
linked: {
comments: {},
users: {},
tags: {},
},
}
export default reduxForm({ validate })(ChatForm);
<ChatForm form={name} />
const mapStateToProps = (state, ownProps) => ({
form: ownProps.name,
});
export default compose(
connect(mapStateToProps),
reduxForm({ validate }),
)(ChatForm);
<ChatForm name={name} />
<Route path="/some-path/:color" component={SomeComponent} />
class SomeComponent extends React.Component {
render() {
const { match, elements } = this.props;
const { color } = match.params;
const filteredElements = elements.filter(el => el.color === color);
// ...
}
}
cookie.set('token', token);
dispatch(setToken(token)); // если не используете Redux, тут будет this.setState
axios.defaults.headers.common.Authorization = `Bearer ${token}`;
const token = cookie.get('token');
if (token) {
dispatch(setToken(token));
axios.defaults.headers.common.Authorization = `Bearer ${token}`;
// other actions
}
dispatch(deleteToken());
cookie.erase('token');
delete axios.defaults.headers.common.Authorization;
store.dispatch(init()); // тут
const root = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDom.render(root, document.getElementById('root'));
document.body.classList.add('someClass');
constructor(props) {
super(props);
this.state = {text: 'hello world'};
this.handleChange = this.handleChange.bind(this);
}
class App extends React.Component {
// ...
hanldeCHange = e => {
this.setState({
text: e.target.value,
});
// ...
}
<input onChange={this.handleChange} />
class App extends React.Component {
// ...
hanldeCHange = e => {
this.setState({
text: e.target.value,
});
// ...
}
Просто я думаю если выполнить npm старт и скопировать build.js который вернется в index.html и запустить это в том же nginx с переадресацией маршрутов в index.html - то не получится то, что я планирую?