I've been banging my head trying to figure out what mapProps and controlProps is in the react element in react-redux-form library.
I'm reading the documentation here but I can't figure out what it means or where it's use cases would be.
<Control
mapProps={\{
customChange: (props) => props.change,
}}
model="..."
/>
<Control.text
model="..."
component={CustomInput}
controlProps={\{errors: 'errors for CustomInput'}}
/>
Could someone please explain it in simple English?
Thank you in advance!
mapProps is used when the control has a component props defined - i.e. is wrapping a custom component. Normally it would just pass on its props to the custom component, assuming it will use the same props names. But if say the custom component uses a different naming convention then this is a way to map the Control prop name to the custom component prop name.
Related
I need to have a component, where I get the type of another component that this component should create. (it could be one of n different elements) Doing this in the component's render function is not a problem, but since I am new to Vue and I am trying to do things the Vue way, not the way I would do it in React.
I have not been able to find any solution with just using a Vue template. Is there one?
This is how I would like to be able to use the component:
<factory elm="first-component"></factory>
The factory should then internally in some way result in this:
<first-component></first-component>
(it should also be able to add attributes to the component, but that I know how to do, so a suggested solution does not need to care about attributes)
There is <component :is="myCoolComponent"></component> that will basically generate <my-cool-component></my-cool-component>.
Is it what you're looking for?
From the documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
You could also totally create a Factory.vue component and put that kind of logic inside of it (<component :is="" ...>).
I have component nabber/header that has a props, and I want to put the props in that component and then want to use that props on another props, how to put that props to get that data and transfer it to another component ? because I want to use that props to CRUD in database ? is that possible that we use $root to get that props which we put on App.vue ??
my components
header = [ props : 'list' ]
shop = add to cart, ( this which I want to transfer it to props list ) and go CRUD , is that possible ??
I suggest learning a bit more about Vuex to solve this problem.
This will give you a logical place to define database related actions that can also provide reactive data to components that will display it. Even if you're relatively new to Vue, learning Vuex sooner rather than later will payoff.
It may also be possible for you to use v-model to extricate some data from one component... but what you've described seems a bit different. It might be worth looking at how to implement v-model on your own components as you become more familiar with Vue!
The standard way of passing properties to a component is to use the v-bind directive:
<Child :prop1="myObj.prop1" :prop2="myObj.prop2" :prop3="myObj.prop3"/>
But Vue makes it possible to simply pass the entire object:
<Child v-bind="myObj"/>
However, one downside I've come across is that the HTML element shows all these properties:
<div class="child" prop1="[Object object]" prop2="2" prop3="[1,2,3]">...<div/>
Is there a way to prevent this behaviour?
There is a way to avoid this without passing props explicitly:
https://v2.vuejs.org/v2/guide/components-props.html#Non-Prop-Attributes
add inheritAttrs: false to the component you are passing props to
After reading documentation on component props look's like vueJs does not provided such provision to avoid this. https://v2.vuejs.org/v2/guide/components-props.html
I'm working on adding swipe to remove functionality to an app we are developing. For reasons we are not using an external library to handle this, so I am writing it myself.
In my project I have a container where I keep state. I use setState to update the state, and am passing state down to this child component as a prop. In the component below, componentWillReceiveProps is called with the correct value updates when they happen, but the child component of this is not receiving updates to its props. If this doesn't make enough sense or you need to see more code let me know. I've only included the parts of code that I feel are relevant since this is a private project.
constructor(props) {
super(props);
this.renderWishlistRow = this.renderWishlistRow.bind(this);
}
renderWishlistRow(product) {
return (
<WishlistRow
item={product}
onItemPress={this.props.onItemPress}
onRemoveAction={this.props.onRemoveAction}
shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
onScrollAction={this.props.onScrollAction}
itemPressed={this.props.itemPressed}
onEndScroll={this.props.onEndScroll}
/>
);
}
Then, inside the render function:
return (
<KeyboardAwareListView
dataSource={this.props.dataSource}
renderRow={this.renderWishlistRow}
renderSeparator={renderCardDividerAsSeparator}
onScrollBeginDrag={this.props.onScrollAction}
scrollEventThrottle={16}
onScrollEndDrag={this.props.onEndScroll}
/>
);
Thanks in advance for any help.
EDIT:
I am setting state in the parent component with this code:
this.setState({
shouldCloseRemoveButton: true,
});
I didn't originally include it because componentWillReceiveProps is being called with the correct state changes from the parent component.
EDIT 2:
My App Hierarchy for this part of the app is as follows:
WishlistContainer: contains the setState calls and passes as a prop: shouldCloseRemoveButton={this.state.shouldCloseRemoveButton}
Wishlist: passes props to its child WishlistRow: shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
WishlistRow: Continues to pass the props down as above, but componentWillReceiveProps is not called here, props are not updating at this level.
I'm not going to mark this as answered, because I want a real answer and what I did to work around this is not good enough for me.
That being said, my workaround was to move the piece of state I was trying to propagate into react-redux. Setting the redux state to contain what I needed using mapDispatchToProps, and then connecting the components that actually needed the state down the line using mapStateToProps, allows the components to receive the notifications they need to do their thing.
Again, I am not choosing this as the answer - even though it is what I did to solve the problem - because something else fishy is going on somewhere and I would like to see if anyone knows why things didn't work as they were.
EDIT
I've run into this issue other times since this originally happened. There is a prop that exists on the Flatlist - This is not the original component I used in the question, but the original component is deprecated now and the Flatlist has the, about to be mentioned, prop for this scenario - called extraData. This particular prop is also watched to help the Flatlist determine if it should rerender itself.
Since the ListView has become deprecated, I feel that using a Flatlist and making sure you pass in an extraData prop - assuming you have a different prop that will change with your list data changes - is an acceptable answer to this problem.
Consider a drop-down menu that routes when changed.
Logically we have a layout as so:
<Things>
{/* Dropdown menu that, when item is selected,
routes to appropriate Thing-specific path */}
<ThingsDropdown />
{/* Component that represents the currently selected thing. */}
<Thing />
</Things>
The idea being that the top-level here is /things/, and choosing an item from the dropdown routes to /things/:thingId/.
When loading /things/:thingId/ directly, the value of the dropdown should default to :thingId. But the parent component (Things) does not have access to the Thing-specific parameter.
This is not a problem unique to React Router. Ember's routing system has the same limitation.
What is the recommended pattern for dealing with this use case? It seems wasteful to have to specify the current thingId twice (once as a parameter, and once in state so that it can be set correctly in the parent component).
Thanks.
Adam
After a bit of research, I've determined the solution here is to use a Route that always renders, and to determine the selected thingId by looking at the match parameter (if set) passed to the component.