- Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
- Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
- Instead, extract a new component and pull it up: – – Let the container decide explicitly when and where show presentational components.
- As you keep pulling presentational components up, they start looking like enhanced native elements, so you’d like to be able to pass all props you would pass to a native element, like or .
- Inside the component, extract the props you’ve defined yourself and pass the rest to the element that you’re wrapping: – – Here, we’re separating the prop from the rest, and passing the remaining props to the element.
Saturday, Feb 17 2018