javascript - 如何通过对象传递 props

Question

我想将所有可能作为对象传递给子组件的 Prop 。

考虑我有一个对象数组，用于确定对象的类型，并且基于我有一个渲染该对象的 map 对象。

这是我的对象数组

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
    }
  }]

这里输入 image 意味着我想要渲染 image 组件，输入 text 意味着我想要输入 Textinput 渲染

现在 Textinput 可能需要很多 props我想将它传播到我的 TextInput 组件上(通过许多 Prop ，我的意思是它支持的所有 Prop )。

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

那么我如何动态传播用户传递的所有 Prop 以及用户是否应该将其传递到数组对象中？

Answer 1

这就是我实现这一目标的方法。

{
    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
    }
  }

在上面添加了一些内容作为componentProps，然后我解构该属性并像这样传递它

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