User story: The backend sends back a file for you to download, using headers such as “Content-Disposition” and “Content-Type: application/pdf” Upon request, the browser will download the file for me in an AJAX manner, so I can show a progress bar If backend sends an error in JSON format, I want to see the error …
Code: Download file from backend in an AJAX manner (Typescript) Read More »
Consider passing in some properties as children, instead of props . This will make the code looks cleaner: The consumer doesn’t have to build a big “props” object to pass in You will divide a single component into several ones. Each one will a take small props object, which is highly inherent For example, instead …
Some thoughts about reusable component design in react Read More »
What’s the width of child in pixel? Of course it’s 350px And the parent is like Let parent has padding The result is the same Width of child is still 350px Btw ,the parent is now Parent has padding + Child has padding Let child has padding: The result is Width of child is still …
Research into child element’s real width if percentage is used Read More »
Only some kinds of state need to be in Redux, State that’s shared by multiple components on the same page State that’s read by multiple components State that’s written by one component and read by another State whose lifecycle is longer than its component. For example, “recordList” for a list page – If you go …
What you need is , Only numbers can be input The length of input is limited to N, say 2 On mobile devices, a number pad will be shown And the way to do it is: If you are using material-ui, it will be
Always use interfaces instead Problems of class: Lots of frameworks such as Redux don’t support class instances. They only support plain objects. There are tools that can convert plain objects to class instances, but the point below makes it awkward. Given a variable “someType: SomeType” in the code, you don’t know if it is a …
Opinion: Don’t use class for data structure in typescript (2019). Use interface only Read More »
One way of doing this is to create your own Router class, which extends the one from the framework; and inside this Router class you put in the tracking logic:
window.history.pushState() won’t be recognised by react-router’s observer. So what will happen is that the url of the browser will be changed, but the corresponding component won’t be loaded. React Router is based on History API, and History.push() will work.
The logic: Show a component only if the user logged in To use it, just
Problem When you go to a react component, then go to another, and finally come back, the react component is showing blank, or half-blank. Investigation If you inspect the page with the mobile safari inspector , you can see the elements are there, but safari just refuse to show the data on the screen. In …
IOS Safari showing a blank page when coming back to a React Component Read More »