Menu
I have some external UI with abstraction of react components and I want to reuse them from reagent, is there any way to directly render predefined react component just by passing data from clojurescript. I am a clojurescript beginner.
493
First, you'll need to create two components, one parent and one child. Next, you'll import the child component in the parent component and return it. Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.
You can use any logic and conditionals in order to build the object. You will most commonly use the ternary operator to add conditional attributes to an element in React.
We have our regular functional component in React and then we have the props – name and imageUrl . They're destructured and passed right into our function so we can really reuse this Author component in any section of our application.
Let's try! We can start by writing the component in a js file.
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
this.props.comment
)
);
}
});
Then we can call it directly from Reagent:
(defonce app-state
(atom {:text "Hello world!"
:plain {:comment "and I can take props from the atom"}}))
(defn comment-box []
js/CommentBox)
(defn hello-world []
[:div
[:h1 (:text @app-state)]
[comment-box #js {:comment "I'm a plain React component"}]
[comment-box (clj->js (:plain @app-state))]])
(reagent/render-component [hello-world]
(. js/document (getElementById "app")))
Notice that we are passing the props to the CommentBox both as plain js objects by using #js and by transforming the atom to plain js clj->js. In case I missed something, you can find the rest in the gist.
137
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
