动态生成本机组件

Question

我尝试了以下方法，以基于传递给父组件的Props动态创建组件。现在，父级想返回存储在数组中的生成的组件。如下所示。

错误：白屏。

// template create from arguments.
static Create (__State) {
// overSpreading.
let { Size, Color, Direction } = __State

// local variable.
let Template = []

// if size and color argument is not empty.
if (!_.isEmpty(Size) && !_.isEmpty(Color)) {

  // both size and color argument should be typeOf array.
  if (_.isArray(Size) && _.isArray(Color)) {

    // check for size of both array both should be exact equal.
    if (_.size(Size) === _.size(Color)) {

      // loop over array and construct template.
      for (let i in Size) {
        // check for stripe direction.
        if (Direction === 'vertical') {
          // return component.
          Template.push(<View style={[ StRipe['base'], Stripe['vertical'], { 'backgroundColor': Color, 'width': Size[i], height: '100%' } ]} />)
        } else {
          // return component.
          Template.push(<View style={[ StRipe['base'], Stripe['vertical'], { 'backgroundColor': Color, 'height': Size[i], width: '100%' } ]} />)
        }
      }
    }
  } else {
    // report state.
    console.warn(new Error(`${this.me} error caught. expected @size || @color to be not empty. but found empty...`))

  }

  // return template.
  return Template
 }
}

// component structure.
static Structure (__State) {
 // overSpreading.
 let { Size, Color, Direction } = __State

// create template.
let Template = Stripe.Create(__State)

console.warn(Template)

// return component.
return Template
}