score:0
i think higher order components (hoc) are also a good candidate for this. you can basically wrap any component in hoc that defines some behaviour and decides if it should render a wrappe.
nicest way to do this would be if you're using a es2015 transpiler with some es2016 features enabled (namely decorators):
function withroles(roles) {
return function(component) {
return class componentwithroles extends react.component {
constructor(props) {
super(props)
// not sure where the data to get your roles about current user?
// from but you could potentially to that here if i'm getting your point
// and also setup listeners
this.state = { currentuser: 'admin' }
}
validateroles() {
// you have access to the ``roles`` variable in this scope
// you can use it to validate them.
return true;
}
render() {
if (this.validateroles()) {
return <component {...this.props} />;
)
} else {
return <div>nope...</div>;
}
}
}
}
}
// you can then use this on any component as a decorator
@withroles({ showonlyfor: [ 'admin' ] })
class adminonlycomponent extends react.component {
render() {
return <div> this is secert stuff </div>
}
}
i've used es2016 features because i think it's nicer to get the point across but you can implement that with just a simple function wrapping, here's a gist by one of the react core members on the topic of hoc: https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775
score:1
i came up with this solution:
var rolesrequired = react.createclass({
permitted: roles => ...,
render: function () {
if (!this.permitted(this.props.roles)) {
return null;
}
return <div>{this.props.children}</div>;
}
});
what i'm doing is wrapping the children being returned in a <div>
but i'm having to add an unwanted/unneeded dom element to achieve it.
Source: stackoverflow.com
Related Query
- Creating a wrapper for a react component
- Test a component is rendered with React Router's render prop using Enzyme's shallow wrapper and Jest
- Creating custom function in React component
- How can I block a React component to be rendered until I fetched all informations?
- Incorrect casing error with dynamically rendered component in React
- React Component not rendered properly with Turbolinks in Rails 5.1
- How to update props of React Component rendered using ReactDOM.render()
- Enzyme returns null for prop on shallow rendered react component
- React Router: access history in rendered Route component
- Creating Custom UI component for android on React Native fails. App crashes
- What causes an "React.Children.only expected to receive a single React element child." error in an apollo client rendered component
- creating pure web component from react components
- Creating an installer for Electron React JS app - reactJS component doesn't load when run after install
- Creating reusable Button Component with React and Typescript with not assignable type error
- Creating a library as a react component
- React Higher Order Component - call function in the wrapped component from the wrapper component
- Wrong positioning of React Material UI Popover while creating a component
- React constructor called only once for same component rendered twice
- React JS, creating a clock timer inside Component
- React component table is being rendered multiple times or duplicated after updating state
- react router changes the URL, but the component is not rendered
- Test whether React component has rendered
- Handling click events of links rendered within markdown React component
- How to test if a react component has been rendered from a switch state?
- How to properly declare type for React wrapper component (HOC) using Typescript
- creating dynamic component names in react with typescript 3.2.2
- A thin wrapper of ACE editor to make a React Component
- Mocking simple internal function using Jest for use in rendered React component
- React Component not rendered
- how to output current rendered component in react testing library unit test
More Query from same tag
- Does redux confuse react detecting "controlled" components or am I doing this wrong?
- How to groupBy an Array of Objects and convert the duplicates
- React - table created incorrectly
- How to label in html NOT with id?
- text is covering the icons in input field reactjs
- unable to create an MxGraph from the XML provided
- A recursive interface for a React Typescript component
- React Native onChangeText like onChange in ReactJS
- Update the Old and New Value in Redux
- How to rewrite this simple component tree to take advantage of React.memo?
- Why will React Context only fire passed down value functions from DOM elements
- How to Detect Backspace character in TextInput with react native
- Dynamic page title with ReactJS
- Cors Issue with React Frontend and Django Backend
- Error "Cannot read property 'map' of undefined" after json fetching
- How to add onClick on the component
- ES6, Javascript. Declare const, undefined in destructuring assignment
- Put request with Axios | React, Redux
- React, load main scripts dynamically depending on the domain
- Using refs in Three JS useFrame hook
- ReactJS Calling a JSON API
- React context keep resetting
- React, writing handleInputChange function more elegant
- css grid + react component challenge
- How to find if the user is signing in for the first time in react firebase-ui?
- How to import Sass modules in Next.js components
- Search function now working in React photo gallary
- How to render multiple components with different component name?
- Property 'then' does not exist on type 'RelayObservable<unknown>'. when I try to fetch data using relay in react. I don't know why this error come
- With JavaScript + React, how to have a string evaluate inline?