Is it possible to have this markup in the html:
<tabs>
<tab title="a title" tab-content="content">
<tab title="a title" tab-content="content">
</tabs>
and have react take that structure and create tabs functionality from it? i.e. create a list from the tab titles and divs for the content which get switched on/off depending on which tab is active.
I've come a background in Angular so may be thinking too angular-centric.
There are a variety of ways to go about creating tabbed content in React. What I believe you're asking though - specifying the content in the html - seems counter to the "react way" of doing things. From the React docs:
Remember: React is all about one-way data flow down the component
hierarchy. It may not be immediately clear which component should own
what state. This is often the most challenging part for newcomers to
understand...
The data for a given component is passed to the DOM rather than derived from it. So I wouldn't expect a React navigation component to get its functionality from existing html content but from the props passed in from the parent component or state that it manages itself.
While you could build this yourself, you may want to look at react-router which will provide some mechanisms for client-side routing and managing tabbed content.
Related
In Panel Types of Wagtail Page,
class wagtail.admin.edit_handlers.xxxxxPanel(field_name, classname=None, widget=None, heading='', disable_comments=False)
Q1: I am wondering what are the comprehensive list of possible values of classname=? Id did not find any solid reference for this argument.
Q2: And What are the purpose for introducing classname= ? only for rendering the Wagtail CMS editing page or it also influences the rendering of published HTML page? (for example, classname=title will render as <h2> tag instead of <p> tag in published HTML page)
The classname option adds the given string to the class="..." attribute on the panel's HTML within the editing interface. It does not affect the front-end rendering.
Since it's just a string, you can set any value you like there, but of course it will only have an effect if there's a corresponding CSS rule for it. full and title are the only documented styles provided by Wagtail itself, but it's possible to add your own custom styles via the insert_editor_css hook.
I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following:
The <TransitionGroup> component manages a set of transition components
( and <CSSTransition>) in a list. Like with the transition
components, <TransitionGroup> is a state machine for managing the
mounting and unmounting of components over time.
Consider the example below. As items are removed or added to the
TodoList the in prop is toggled automatically by the
<TransitionGroup>.
I'm not really sure what that means or why it's important.
Also, when I modify the example code that they embed on the documentation page so that the <TransitionGroup> tags are replaced with <ul> tags everything seems to work just fine (I can remove todo items by clicking on them, I can add new todo items).
Why is <TransitionGroup> component necessary? What does it do? (And why do things appear to work just fine when I replace it with an unordered list?)
React Transition Group has some advantages over typical css animations.These are some points that are coming to my mind.
Its uses binding to change classes for a components. eg: enter, appear, enter-active, appear-active, exit, exit-active etc are all part of animation classes. This make it really interactive interms of rich animations which you can not achive otherwise.
It has advatage to unmount your component using javascript, once animation is done. So basically no extra load on your front end.
It gives your freedom to define animations which ever way you like. Either css classes or defineing your own styles with in js file.
It gives you various type of animation options. Eg: Switch Transitions, Transition Groups, CssTransitions etc.
I would suggest to keep experimenting with typical css animations and react transition group and come to your own conclusion.
Code example: https://codesandbox.io/s/jovial-paper-s0c69?file=/src/App.js
Material UI makes smooth collapse.
But, when I put JSX to external component, smooth brakes.
I made code example with smooth collapse and without smooth collapse.
How can I keep Lists in external component and keep smooth collapse?
But, when I put JSX to external component
Your example does not actually use an external component, you define Lists inside of NestedList and that function is consequently recreated on every render.
The desired behavior can be achieved by actually having a separate Lists component that receives the required props from its parent:
<Lists open={open} handleClick={handleClick} />
I'm trying to implement a pop over that can show on any screen in the web application, using React+Redux+React router
The popover is a container, that is triggered by the application state.
But how is the best practice to do such a thing, since the background is transparent, and it should just show on any screen that is currently presented.
Should it be on top of the router, on hidden, and unhide on present? I can seem to find any example for this senario...
Popover can sit inside Root component, something like this.
<App>
<HomePage />
{shouldShowPopOver && <PopOver />}
</App>
You can dispatch { type: TOGGLE_POPOVER } action anywhere, to alter shouldShowPopOver. The styling(transparent, whole page etc) should be done through css.
You ca use react-bootstrap popover. Checkout the link
https://react-bootstrap.github.io/components.html#popovers
I'm using react-modal component and it works pretty well.
I have used react-modal-dialog before and it works like a charm! The benefit of this library is that you can define your <Modal> component near where the source of trigger is (some button?) and it is easy to trace the condition that determines whether the modal is displayed since it is near the trigger source.
Using this library, technically it does not matter where you put the modal component among your markup as the CSS of the modal makes it appear above all other elements.
I have a Document component in ReactJS. This document component has 10 different other child components.
<Document>
<Header/>
<Body>
<Image/>
<Paragraph1/>
<Paragraph2/>
<Paragraph3/>
<Paragraph4/>
<Paragraph5/>
<Paragraph6/>
<Paragraph6/>
</Body>
</Document>
The Paragraph child components have content, some words in the content have a 'help' or 'meaning' link next to the word shown with a ? mark. When the user click the ?, a bootstrap popover is shown. These popovers can have large content, so I decided not to build the Paragraph components with all the popover components (I used react-bootstrap) because the DOM can be large and can effect the scrolling performance (framerate of the browser).
Instead I thought about rendering the paragraph again when the user clicks the ? Clicking the ? will trigger a state change which ultimately renders the paragraph with the popover. With this approach, no popovers are created during the first rendering of the whole document.
I'm not sure what is the best pattern to follow to do something like this in ReactJS? Generate the large DOM with all the popovers (large DOM) or create the popover only when the user takes action (smaller DOM)?