javascript - 从使用 React Native 中的映射函数渲染的组件的父级调用子方法

Question

正在构建一个表单，根据字段的 json 定义插入字段，解析 json 对象并将其传递到 switch 语句，该语句选择适当的小部件并将其插入到数组中，该数组经过排序，然后使用数组映射进行渲染我需要实现的是在按下提交后调用每个字段的验证字段现在我如何访问此元素并调用适当的验证逻辑

到目前为止我已经尝试过

1. 当我将小部件插入数组时使用引用抛出与在渲染函数外部分配引用相关的错误
2. 将对映射的调用包装在引用 View 中，并通过 this.refs["myWrapper].props.children 将小部件作为该 View 的 subview 进行访问这种方法使我可以访问我的小部件，但返回的对象不包含我的方法，因此调用它们会抛出不是函数的错误

代码示例

`导出类 myForm 扩展组件{

constructor(props){
    super(props);
    this.fields=[];
}

getFields(fields){

 let {formName,title}=this.props;

    let field,_fields=[],item;

    fields= this.sortFieldsOrder(fields);


    fields.forEach((sect,i)=>{
        for(field in sect)
        {
            item=sect[field];
            switch (item.widget){

                case "inlineText":
                    _fields.push(
                        <EbTextInput  key={field}

                                     {...{...item.props,formName,title}}
                                     field={field}
                                     label={item.hasOwnProperty("label")?item.label:""}
                                     validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
                        />
                    );

                    break;
                case "hidden":

                    _fields.push(
                        <EbHiddenInput  key={field}
                                       {...{...item.props,formName,title}}
                                       field={field}
                                       label={item.hasOwnProperty("label")?item.label:""}
                                       validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
                        />
                    );
                    break;
                case"modal":
                    _fields.push(

                        <EbModalInput
                                      key={field}
                                      {...{...item.props,formName,title}}
                                      field={field}
                                      fields={item.props.fields instanceof Array?this.getFields(item.props.fields):[]}
                                      label={item.hasOwnProperty("label")?item.label:""}
                                      validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
                        />

                    );
                    break;
                case"filePicker":

                  let  picker=<EbFilePickerInput key={field}
                                                 {...{...item.props,formName,title}}
                                                 field={field}
                                                 label={item.hasOwnProperty("label")?item.label:""}
                                                 validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
                  />;
                    picker=[picker];

                    _fields.push(
                        <EbModalInput  key={field}
                                      {...{...item.props,formName,title}}
                                      field={field}
                                      fields={picker}
                                      label={item.hasOwnProperty("label")?item.label:""}
                                      validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
                        />
                    );
                    break;
                case "option":
                    _fields.push(
                        <EbOptionInput

                            key={field}
                            {...{...item.props,formName,title}}
                            field={field}
                            fields={item.props.fields instanceof Array?this.getFields(item.props.fields):[]}
                            label={item.hasOwnProperty("label")?item.label:""}
                            validator={item.hasOwnProperty("validator")?item.validator:()=>{}}                            />
                    );
                    break;
                default:

            }


        }
    });
    return _fields;
}
sortFieldsOrder(arr){
    return  arr.sort((a,b)=>{
        let keyA=Object.keys(a)[0];
        let keyB=Object.keys(b)[0];
        if(a[keyA]["order"]<b[keyB]["order"])return 1;
        if(a[keyA]["order"]>b[keyB]["order"])return -1;
        return 0;
    });
}
componentWillMount(){

    let {fields}=this.props;
    this.fields=this.getFields(fields)

}
renderFields(){
   return this.fields.map((item)=>{
        return item;
    })
}
validateForm(){
    let field;
    let fields=this.refs["wrapper"].props.children;
    let status=true;
    React.Children.map(this.refs["wrapper"].props.children, (child) => {
        if(!child.validate()){
            status= false;
            console.log("valid form cheki");
            // break;
        }
    })



   return status;
}
render(){
    return(
        <View ref="wrapper" style={[styles.flex1]}>
            {this.renderFields()}
            <Button text="Submit" onPress={(e)=>{
                if(this.validateForm()){
                    //alert("valid form")
                }
                else
                    alert("invalid form")
            }}> </Button>
        </View>)
}

}

`

Answer 1

在 react 中，无论出于何种原因，它都是直接访问节点的 Ant 模式，所以我决定使用 redux 遵循上面的第一条评论，我可以发送一个验证信号并让每个小部件验证自己的状态，这减少了耦合并且易于操作实现和调试，所以我建议每个有同样问题的人都遵循这个步骤