guys! I'm building React Native component that contains a UI pattern. This UI pattern will contain several smaller reusable patterns. This way:
<ListItem onPress={}>
<IconContainer>
<Icon />
</IconContainer>
<Body>
<Text>Content</Text>
</Body>
<Right>
<Action onPress={} />
</Right>
<ListItem>
Now I'm also building embedding size variants (small, medium/default and large) for some of these children, like this for example:
<IconContainer large={boolean} small={boolean}>
<Icon />
</IconContainer>
And since the are several children, I don't want to have the person using the component to have to specify the size variant for each one of the children. That'll also require them to know which one of the children have size variants and which one doesn't.
So, what I'm trying to do is to embed a props.large and a props.small into the parent and use that to change de value of the same prop if available in the children.
Any ideas of how to do that in a simple way?
(I suspect this is easy but I've been struggling with this for a while so I thought I'd ask for some help.)
Thanks in advance!
Related
In my React component called Grid.js I am using a childcomponent called Pagination. It looks like this:
<StyledBox wrap py={12} px={18}>
<Header />
{state.data}
<Wrapper column justify="center" align="center" p={12}>
<Pagination onChange={this.handleChange} totalPages={10} />
</Wrapper>
</StyledBox>
It is a grid with some pagination functionality. When the user selects a page on the Pagination a changeevent will fire and a stateprop of the Grid will be set called state.data. The issue is that the pagination starts jumping around randomly: looks like the state has changed on the component.
Do I have to move the Pagination out of the Grid component and make it not a childcomponent?
Is the Pagination Component jumping around randomly because previously there was a specific length of data. Then when the this.state.data changes, the length of data is different? So then, the Pagination had to adjust it's positioning. Without more information, it seems like a HTML and CSS issue.
Try to set position: fixed; bottom: 1rem on the Pagination component css and see if it still jumps.
Also, regarding React Components, <Content /> and <Pagination /> components seem to be conceptually sibling and not parent-child related. So I would structure the app something like this:
<ParentContainer>
<Header />
<Content data={this.state.data} />
<Pagination onChange={this.handleChange} totalPages={10} />
</ParentContainer>
I want to put the toggle element on the other side, but the problem is that listItem according to the Material-ui documentation doesn't support a leftToggle option (the attribute leftToggle doesn't exist). Is there any way to do this?
I want to do put the toggler and secondary text on the same line. Also, is there a solution that doesn't involve ListItem?
<ListItem primaryText={theEEState ? "Allow": "Disallow"}
secondaryText="Allow / Disallow"
rightToggle={
<Toggle
onToggle={onToggleStateMethod}
toggled={theEEState}
/>
}
/>
Use the Toggle component. The documentation contains an example of a left hand side switch.
http://www.material-ui.com/#/components/toggle
<Toggle
label="Label on the right"
labelPosition="right"
style={styles.toggle}
/>
I have started development in REACT and have some small queries on how to use it inline.
I have for example the following code snippet.
ReactDOM.render(
<RitualPromoCode url="/Home/ValidatePromoCode" code="Bongo" location="1" package="17" />,
document.getElementById('promo-code')
);
however when using the above using it within my MVC page is annoying...i would like to be able to within the HTML page use the new "tag" inline...e.g.
<RitualPromoCode url="/Home/ValidatePromoCode" code="Bongo" location="1" package="17" />
How do i go about doing this?
On another note..I want to use multiple components in different parts of my page but don't want to write one HUGE component to use them all together. How can i get one component to update / modify the properties of another on the same page?
Thanks
You can call render in one place. Just create some "main" component which will contain all others.
ReactDOM.render(
<App />,
document.getElementById('promo-code')
);
class App extends Component {
render() {
return (
<div>
<RitualPromoCode url="/Home/ValidatePromoCode" code="Bongo" location="1" package="17" />
<SomeOtherComponent />
<MoreComponent />
<MyComponent />
</div>
);
}
}
How to customize nested components?
I'm building React Native app with Redux.
I have three screens in my app that render list of users.
Follower/Following should show FollowButton:
<FollowersContainer>
<UserList onFollow={func} onUnfollow={func} users={[...]}>
<UserCard user={user} onFollow={func} onUnfollow={func}>
<FollowButton onFollow={func} onUnfollow={func} isFollowing={bool} userId={string} />
</UserCard>
</UserList>
</FollowersContainer>
Ask question screen should show AskButton:
<AskQuestionContainer>
<UserList onAsk={func} users={[...]}>
<UserCard user={user} onAsk={func}>
<AskButton onPress={onAsk} />
</UserCard>
</UserList>
</AskQuestionContainer>
Search Results should not show any button
<SearchResultsContainer>
<UserList users={[...]}>
<UserCard user={user} />
</UserList>
</SearchResultsContainer>
As you can see, all three screens uses UserList and UserCard components.
Currently UserList and UserCard needs to know about onFollow onUnfollow and onAsk actions and how to pass them around.
This can get complicated and not very flexible.
Ideally I want to do something like:
<UserList
rowComponent={
<UserCard button={<FollowButton />} />
}
/>
But how do I pass the actions from the top level component into the actual button? and How do I know which actions to pass?
I could use connect on the actual buttons to pass them the actions directly but I prefer these components stay pure and flexible.
Any suggestion on how to solve it in a clean way?
Thanks,
Ran.
You can pass components as a prop.
render() {
var passedButton = (<FollowButtton />);
var row = (<UserCard button={passedButton} />);
return (
<UserList rowComponent={row}/>
);
};
I want to achieve the following DOM mutation using ReactJS, and animate it so that it cannot be noticeable by the end user.
<RootComponent>
<MyComponent id="a"/>
<div>
<MyComponent id="b"/>
</div>
<MyComponent id="c"/>
</RootComponent>
to
<RootComponent>
<MyComponent id="a2"/>
<div>
<MyComponent id="a"/>
</div>
<MyComponent id="c"/>
</RootComponent>
I successfully handle the animation (by moving the DOM Node around through the parent) and replace b with a, along with creating a new a2component.
The problem is, as soon as I ask React to rerender the root component (by placing a2), I run into an invariant violation. Indeed, I mutated the DOM manually, and data-reactids might be shuffled.
How could I complete such a workflow following React's best practices ?