score:2
Accepted answer
one approach would be to have a function that returns your component function:
function createcomponentclass(ele, name, styles, children) {
return (props) => {
const { classname, style, id } = props;
return (
<ele classname={`${name} ${classname}`} style={...{styles.container}, ...{style}} id={id}>
{children(props)}
</ele>
);
};
}
const modal = createcomponentclass('div', 'modal', { container: { ... } }, (props) => {
return (
<>
{!props.hidden && <extracontent />}
{props.children}
</>
);
});
const votebutton = createcomponentclass('div', 'votebutton', { container: { ... } }, (props) => {
let img = pressed ? './img_pressed.jpg' : './img_not_pressed.jpg';
return <img src={img} />;
});
const navbar = createcomponentclass('nav', 'navbar', { container: { ... } }, (props) => {
return (
<>
{links.map(lk => <a href={lk.href}>{lk.text}</a>
{children}
</>
);
});
Source: stackoverflow.com
Related Query
- Is it possible to implement an inheritance like mechanism for React components in order to reduce nearly duplicate code?
- How to implement a React infinite scroll component for a chat app like Facebook Messenger?
- How can I implement destructuring assignment for functional react components props?
- How to implement Factory Pattern for components in a React App?
- Implement "show more, show less" in React component when using map for adding the components
- How to implement an props interface for conditions with styled components in React with Typescript
- Using mixins vs components for code reuse in Facebook React
- Using for loops and switch cases in React to dynamically render different components
- How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras
- How to implement long polling for React + axios
- Implement useSelector equivalent for React Context?
- WebStorm/PhpStorm warning for react attributes in jsx like className
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- Naming Best Practices for React Components and Functions Including Filenames
- No need for state in React components if using Redux and React-Redux?
- How to implement scroll restoration for React Router SPA
- Is it possible to ignore ssl verification for fetch api in react app?
- Generating PropTypes for React Components written in TypeScript
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- Must React components act like pure functions with respect to their props?
- How to implement search bar button and result components in react
- React hooks: are they useful for shared state management, like e.g. Redux?
- Unsafe legacy lifecycles will not be called for components using new component APIs. React v16.3
- react-cosmos vs atellier vs React Storybook for building UI components
- ReactJS - How can I implement pagination for react with keep state when route change?
- How to implement pagination for react by semantic-ui-react
- What is the default implementation for "shouldComponentUpdate" lifecycle method in React components
- React how to print landscape / portrait for different components
- Sync queryParameters with Redux state and react router for function components
- Is it possible to store React components in an array?
More Query from same tag
- How can I access all elements with a particular attribute in graphQL?
- Cannot access page on Refresh due to Hasbangs in a React SPA
- How do I access the children of the clicked element using REACT?
- Conditional within a conditional
- Switch and Constructor Component (React) to Change Source when passing props
- How to place an image on the bottom left of a sidebar?
- Issue when implementing ReactDOM.createPortal (react 16 feature)
- Redux getState returns initialState on server
- Why is my state's value is always undefined?
- React useEffect dependencies invalidation
- Material-table for react
- Error when running Express server using nodemon alongside react dev server
- Jest mock the same function twice with different arguments
- previous state in reducers in redux with react
- How to test functional component with async callback inside useEffect using snapshots
- Accessibility: Using javascript only links with href="#"
- Saving user uploaded image to folder and/or server
- React JS: Calling two functions in an onClick event does not run functions
- Show a semantic-ui-react popup without onclick of button or anchor tag : React+Typescript
- State is not updating in useEffect why?
- WebStorm is auto downloading JavaScript typings. How to stop this?
- Efficient way to request back-end for data on input change
- React BrowserRouter not working with nested path
- React Router useParams hook returning empty object
- React Full Stack: Cannot read properties of undefined (reading 'map')
- Async await in react typescript
- React Redux not dispatching API Call to delete player
- React loop array and rende object
- What is the purpose of React Router?
- How to prevent table rows from rebuilding on update