Question

描述

我正在尝试为任何x组件动态创建一个组件，以便可以轻松管理我的小型x-component [BLOCKS]。对于这个问题，我已经做了一些工作，但是被错误惊呆了：找不到{__Name}

的视图配置

进入工作流程

第4步：导入组件并使用。示例：使用输入创建表单。组件通过调用以创建第5步中定义的Props来创建动态组件，并呈现返回的组件。

/*
--------------->
IMPORT'S.
--------------->
*/
import React, { Component } from 'react' // core: contain react and component related libraries.
import { View, Text, AppRegistry } from 'react-native'// core: contain react-native components.
import _ from 'underscore' // npm : utility module.
import Color from 'color' // npm: color related manipulation library.


// application instance import
import { CreateComponent } from '../../system/instance.js' // custom: application component's store.


// application style import.
import { STATES, BASE_COLOR, black, one, two, white } from '../../assets/_include/global.js' // custom: contain's global variable's.
import { Footer, TeXt, StRipe, account } from '../../assets/react.js'

// component props.
type Props = {};


/*
--------------->
EXPORT'S.
--------------->
*/
export default class FormBlockComponents extends Component<Props> {
 // local properties.
 me = 'form'

 // constructor.
 constructor (Props) {
 // pass props to super class.
 super(Props)

  // overSpreading.
  let { label, backgroundColor } = Props

  // state setup.
  this.state = {
    // prop options.
    option: {
      'Placeholder': label || [ '--' ],
      'BackgroundColor': backgroundColor || [ BASE_COLOR ]
    }
  }
}

// static form handler.
static Handler (__object) {}

// template create from given @STATE.
static Create (__object) {
 // over spreading.
 let { me } = __object

 // run @Action on State.
 let Template = <CreateComponent Component={
   {
     'Text': {
       'style': {
         'backgroundColor': 'red', 'height': 10, 'width': '100%', 'display': 'flex'
       },
       'content': 'transparent'
     }
   }
 } CallBack={FormBlockComponents.Handler} me={this.me} />


 // run prop check for inputs.
 if (!_.isEmpty(Template)) {
   // return template.
   return Template
  }
}


// setup diff-diff layout based on params passed.
static Structure (__STATE) {
  // overSpreading.
  let { me } = __STATE

  // create template.
  let CreatedTemplate = FormBlockComponents.Create({ [me]: __STATE })

  // return component.
  return (
    CreatedTemplate
  )
}

// component render method for generating layout.
// based on props.
render () {
  return FormBlockComponents.Structure({ ...this.state.option, 'me': this.me })
  }
}

第5步：需要以下道具。 Component = {[COMPONENT_NAMEKEY]：[COMPONENT_PROPS]}在这里，组件名称是在要创建的对象中定义的，组件值是要创建的组件样式。

/*
--------------->
IMPORT'S.
--------------->
*/
import React, { Component } from 'react' // core: contain react and component related libraries.
import { View, TextInput, AppRegistry } from 'react-native'// core: contain react-native components.
import _ from 'underscore' // npm : utility module.
import Lo from 'lodash' // npm : utility module.
import Color from 'color' // npm: color related manipulation library.

// application instance import
import { TagH1, TagP, MODButton, MODPill } from '../../instance.js' // custom: application component's store.

// application style import.
import { STATES, BASE_COLOR, black, one, two, white } from '../../../assets/_include/global.js' // custom: contain's global variable's.
import { Footer, TeXt, StRipe, account } from '../../../assets/react.js'

// local variable.
let Config = [ {'create': ['TextInput', 'Text']} ]

// component props.
type Props = {};

/*
--------------->
EXPORT'S.
--------------->
 */
export default class CreateComponent extends Component<Props> {
  // props.
  Template = []
  PureObjectStore

  // constructor.
  constructor (Props) {
    // pass props to super class.
    super(Props)

    // overSpreading.
    let {Component, backgroundColor, me, CallBack} = Props

    // state setup.
    this.state = {
      // prop options.
      option: {
        'me': me,
        'Component': Component || ['--'],
        'CB': CallBack || (() => { return null }),
        'BackgroundColor': backgroundColor || [BASE_COLOR]
      }
    }
 }

// @_Utility method's.
static _PureObject (__rawObject) {
  // local variable.
  let _pureObject, _done

  // local initalization.
  _done = false
  _pureObject = {}

// if @__rawObject is not empty.
if (!_.isEmpty(__rawObject)) {

  // if @__rawObject is array than recurisve call.
  if (_.isArray(__rawObject)) {
    // store object.
    this.PureObjectStore = __rawObject[0]

    // loop over object.
    return this._PureObject(this.PureObjectStore)
  } else {

    // if typeOf object is [] || {}
    if (typeof __rawObject === typeof {} || typeof __rawObject === typeof []) {
      // loop over @_config for finding match of action.
      _.each(__rawObject, (j, _rawKey) => {
        // if @__rawObject key is numerical.
        if (Lo.isNumber(_rawKey)) {
          // get value of key and replace with content.
          console.error('[system/component/create] found _rawKey numerical.')
        } else {
          // get value of key and replace with content.
          _pureObject[_rawKey] = j
        }
      })

      // set done to true as loop completed.
      _done = true
    } else {
      // return object as pure object.
      return __rawObject
    }
  }
}

  // return pure object if not empty..
  if (!_.isEmpty(_pureObject) && _done) {

    // return object.
    return _pureObject
  }
} // remove any [] wrapping from object. [[{...}]] => {...}

// check map for @Action type over dynamic construction.
static Action (__object, CB) {
  // over spreading.
  let {create} = __object || {}

  // local variable.
  let _key, _match, _configKey, Template

  // local initialization.
  Template = []

  let _getPureObject = this._PureObject(__object)
  let _getPureConfig = this._PureObject(Config)

  // if returned Pure object is not empty.
  if (!_.isEmpty(_getPureObject)) {

   // if Pure object contains action's as first key else it is invalid Object.
    _.each(_getPureObject, (j, _action) => {

      // check for action in @_configuration list.
      if (!_.isEmpty(_action) && !_.isEmpty(j)) {

        // switch for handling Template.
        switch (_action) {
          case 'create':
            // request @Component create operation.
            let _getTemplate = this.Create(j)
            // on successful template return append template to @Template container.
            if (!_.isEmpty(_getTemplate)) {

              // push template to container.
              Template.push(_getTemplate)
            }

            break
        }
      }
    })
  }

  return Template
}

// create object based on @STATE provided.
static Create (__object) {
  // overspreading...
  let { Component } = __object

  // local variable.
  let _pureConfig = this._PureObject(Config)
  let Template = []

  // get component from given object values.
  if (!_.isEmpty(Component)) {

    // check for component size.
    if (_.size(Component) >= 1) {

      // loop over component.
      _.each(Component, (target, TargetIndex) => {

        // if given target || targetIndex is not empty.
        if (!_.isEmpty(target) && !_.isEmpty(TargetIndex)) {

          // check if given index is valid react-native component.
          if (_.contains(_pureConfig['create'], TargetIndex)) {
            // local props.
            let _content, _style, _contentTarget, _contentLessTarget

            // apply style if available.
            _style = target['style']

            // if @target contain's content option than use @</target>
            if (_.contains(target, 'content')) {
              // create template with closing tag.
              _contentTarget = <TargetIndex style={_style} key={TargetIndex}> { target['content'] } </ TargetIndex>

              // push generated template to @Template container.
              Template.push(_contentTarget)
            } else {
              // create template with self-closing tag.
              _contentLessTarget = <TargetIndex style={_style} key={TargetIndex}/>

              // push generated template to @Template container.
              Template.push(_contentLessTarget)
            }
          }
        }
      })
    }
  }

  // return template if not empty.
  if (!_.isEmpty(Template)) {
    // return template.
    return Template
  }
}

// handle component CRUD operation.
static handler (__object) {
  // local variable.
  let Template = []

  // run @Action on State.
  let _create = this.Action({ 'create': __object })

  // run prop check for inputs.
  if (!_.isEmpty(_create)) {

    // convert string template to react-native component.
    let _pureComponent = this._PureObject(_create)

    // if @_pureComponent is not empty.
    if (!_.isEmpty(_pureComponent)) {

      // push pure component to @Template container.
      Template.push(_pureComponent)
    }
  }

  // if template is not empty than return.
  if (!_.isEmpty(Template)) {
  // return template.
  return Template
 }
}


// setup diff-diff layout based on params passed.
static Structure (__STATE) {

  // return component.
  return CreateComponent.handler(__STATE)
}

// component render method for generating layout.
// based on props.
render () {
  return CreateComponent.Structure({ ...this.state.option, 'me': this.me })
 }
}

结果一切正常。但最后，我收到了错误ERROR：找不到名称为Text的视图配置[如果文本以COMPONENT_NAMEKEY的形式提供]

创建动态反应的本机组件

0 个答案: