Menu
I'm using react_component in my Rails project. This inserts a wrapping div for the react.js component, e.g.
<div data-react-class="ButtonSwitchToTab" data-react-props="{...}">
<a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
Add / Invite People
</a>
</div>
What I really need is to insert style information into this wrapping div so that components align appropriately, like so:
<div data-react-class="ButtonSwitchToTab" data-react-props="{...}"
style="display:inline-block"> <<<<<------
<a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
Add / Invite People
</a>
</div>
What's the appropriate way to do that?
907
Sharing styles across many React components The style objects and the components do not have to be in the same file. We can create a separate . js file for our styles, export these styles, and then import them into the component where we want to use them.
To create wrapper components, you'll first learn to use the rest and spread operators to collect unused props to pass down to nested components. Then you'll create a component that uses the built-in children component to wrap nested components in JSX as if they were HTML elements.
The <div> Soup Actually there is a solution. You might have already guessed it, it is to wrap a <div> around all the elements in the return statement, this technically make the return statement to return only one value as a whole.
Ah, dove deeper into react_rails doco (Helper's signature) and found that I could add pass-through html_options.
So:
<%= react_component('ButtonSwitchToTab', {prop: .., prop: ..},
{:style => "display:inline-block"}) %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With