exclude: /node_modules/
"allowSyntheticDefaultImports": true,
import React from 'react';
"allowSyntheticDefaultImports"
установленно в значение false
, лоадер парсит библиотеки в node_modules, а дефолтные импорты React сделать с текущими настройками не может. interface FetchNewsDataSucceededAction {
type: typeof FETCH_NEWS_DATA_SUCCEEDED;
payload: News[];
}
interface FetchNewsDataFailedAction {
type: typeof FETCH_NEWS_DATA_FAILED;
payload: MappedError;
}
type NewsActionTypes = FetchNewsDataSucceededAction |
Action<typeof FETCH_NEWS_DATA_REQUEST> |
FetchNewsDataFailedAction;
const fetchNewsDataRequest = (): NewsActionTypes => ({
type: FETCH_NEWS_DATA_REQUEST,
});
const fetchNewsDataSucceeded = (payload: News[]): NewsActionTypes => ({
type: FETCH_NEWS_DATA_SUCCEEDED,
payload,
});
const fetchNewsDataFailed = (payload: MappedError): NewsActionTypes => ({
type: FETCH_NEWS_DATA_FAILED,
payload,
});
export const fetchNewsData = (): : ThunkAction<Promise<void>, {}, {}, AnyAction> =>
async (dispatch: ThunkDispatch<{}, {}, NewsActionTypes>): Promise<void> => {
try {
const { data } = await Axios.get(`https://api.dtf.ru/v1.6/news/default/recent?count=1`);
dispatch(fetchNewsDataSucceeded(data));
} catch (error) {
dispatch(fetchNewsDataFailed(mapAxiosError(error)));
}
};
interface History<HistoryLocationState = LocationState>
type LocationState = any;
const Amasia = () => (
<div>Amasia</div>
);
const Product = ({ match }) => (
<div>
Page number: {match.params.page}
</div>
);
const Header = () => (
<header>
<nav>
<Link to="/">Amasia</Link>
<Link to="/Mens/Hat/1">Product</Link>
</nav>
<div>Logo</div>
<div>FormSearch</div>
<div>ButSearch</div>
</header>
);
const App = () => (
<>
<Header />
<main>
<Switch>
<Route exact path="/" component={Amasia} />
<Route exact path="/Mens/Hat/:page" component={Product} />
</Switch>
</main>
</>
);
const rootElement = document.getElementById("root");
ReactDOM.render(
<Router>
<App />
</Router>,
rootElement,
);
useEffect(() => {
doSomething();
}, [match.params.id]);
с чем это связано
let s: string;
s = 182;
const [prod, setProd] = useState<FakeProductList | null>(null);
if (!prod) {
}
return (/* ... */);
interface Filter {
name?: string;
title?: string;
}
interface FiltersProps {
filters: Filter[];
}
const Filters: React.FC<FiltersProps> = ({ filters }) => (
<div>
{filters.map((filter: Filter) => (
<div key={filter.name}>
{filter.title}
{filter.name}
</div>
))}
</div>
);
const Main: React.FC = () => (
<Filters filters={filters} />
);
interface State {
shouldShowBtn: boolean;
}
class MyComponent extends React.Component<null, State> {
state = {
shouldShowBtn: true,
};
componentDidMount() {
window.addEventListener('scroll', this.scrollHandler);
}
scrollHandler = () => {
const { shouldShowBtn } = this.state;
if (window.pageYOffset > 50 && shouldShowBtn) {
this.setState({ shouldShowBtn: false });
} else if (window.pageYOffset <= 50 && !shouldShowBtn) {
this.setState({ shouldShowBtn: true });
}
};
componentWillUnmount() {
window.removeEventListener('scroll', this.scrollHandler);
}
render() {
return (
<>
{this.state.shouldShowBtn && <button>lioih </button>}
</>
);
}
}
const MyComponent: React.FC = () => {
const [shouldShowBtn, setShouldShowBtn] = useState(true);
const context = useMemo(() => ({ shouldShowBtn }), []);
useEffect(() => {
context.shouldShowBtn = shouldShowBtn;
}, [shouldShowBtn]);
useEffect(() => {
const scrollHandler = () => {
if (window.pageYOffset > 50 && context.shouldShowBtn) {
setShouldShowBtn(false);
} else if (window.pageYOffset <= 50 && !context.shouldShowBtn) {
setShouldShowBtn(true);
}
};
window.addEventListener('scroll', scrollHandler);
return () => {
window.removeEventListener('scroll', scrollHandler);
};
}, []);
return (
<>
{shouldShowBtn && <button>lioih </button>}
</>
);
};
const useGetState = (initialState: any) => {
const [state, _setState] = useState(initialState);
const context = useMemo(() => ({ state }), []);
const getState: any = useCallback(() => context.state, []);
const setState = useCallback((state) => {
context.state = state;
_setState(state);
}, []);
return [getState, setState];
};
const MyComponent: React.FC = () => {
const [getShouldShowBtn, setShouldShowBtn] = useGetState(true);
useEffect(() => {
const scrollHandler = () => {
console.log(window.pageYOffset, getShouldShowBtn());
if (window.pageYOffset > 50 && getShouldShowBtn()) {
setShouldShowBtn(false);
} else if (window.pageYOffset <= 50 && !getShouldShowBtn()) {
setShouldShowBtn(true);
}
}
window.addEventListener("scroll", scrollHandler);
return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, []);
return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;
};