如何通过对象传递道具

Question

I want to spread all the props passed *probably as an object to a child component.

Consider I have a array of objects which is used to determine the type of the object and based that I have a map object which renders that object.

So this is my array of objects

const inputFields = [
  {
    key: 'images',
    type:'otp', 
    label: "Upload all your images", 
    required: true, 
    helper: 'You can change your profile pic anytime from settings', 
    templateOptions:{
      noOfTextInput:5
    }
  }, 
  {
    key: 'name', 
    type: 'text', 
    label: `Your Full Name`,
    helper: 'Using your real name would make it more likely for you to get a match',
    required: true,
    templateOptions: { 
      placeHolder: 'Frank Murphy',
      templateStyle: styles.textStyle // refer to the style component
    }
  }]

Here type image means, I want the image component to render and type text means I want type Textinput to render

Now Textinput can take many props which I want to spread it on my TextInput component (by many props, I mean all the props it supports).

  <TextInput  
      style={[{color: defaultColor, borderColor: defaultColor}, styles.defaultTextInputStyle, textInputStyle]}
      onChangeText={text => onChangeHandler(text)}
      keyboardType
      value={value} />

So how can I dynamically spread all the props user have passed and should user pass it in the array object?

Answer 1

So this is how I achieved it.

{
    key: 'name', 
    type: 'text', 
    label: `Your Full Name`,
    helper: 'Using your real name would make it more likely for you to get a match',
    required: true,
    templateOptions: { 
      componentProps: {
        placeholder: 'Frank Murphy'
      },
      templateStyle: styles.textStyle // refer to the style component
    }
  }

Added something as componentProps above and then I am destructuring that property and passing it like this

 <TextInput  
  {...componentProps}
  style={[{color: defaultColor, borderColor: defaultColor}, styles.defaultTextInputStyle, textInputStyle]}
  onChangeText={text => onChangeHandler(text)}
  value={value}
  /> 

Answer 2

Better pick and spread your props explicitely, if TextInput component does not support all of them:

const textInputFieldProps = {label: "my Name", required: true, notThis: "nono"};

const Comp = () => {
  // destructure all props for TextInput (here label and required)
  const { label, required, ...rest } = textInputFieldProps;
  // and spread them into TextInput
  return  <TextInput {...{ label, required }} />
};

You could go the other way and use the rest assignment for all needed props:

const Comp2 = () => {
  const { notThis, ...rest } = textInputFieldProps;
  return  <TextInput {...rest} />
};

I would favor the first one, as even more explicit and safe in terms of props passed into TextInput . Imagine you add more props, these also would be propagated via rest , and you might not want this.

What React docs say to spread attributes:

Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.

Answer 3

We can use the spread operator to achieve this. In general, the props object can contain two types of property: one is component-specific, other is our own. I usually filter the properties that should not be in component props. Below is an example code.

 const { other1, other2, ...rest } = props <TextInput {...rest} style={[{color: defaultColor, borderColor: defaultColor}, styles.defaultTextInputStyle, textInputStyle]} onChangeText={text => onChangeHandler(text)} value={value} />