求助如何获取指定的组件并修改它的样式



  • 现在项目中有个需求需要动态生成form表单,
    表单中有一项需要根据内容的高度来调整表单UI的高度。

    贴代码

    if(formType == "image"){
          var myImage = (
            <PhotoPicker
              ref="photopicker_ref"
              key={formType+"_+0"}
              height = {height-20}
              currentIndex = {index}
              onLayout={(event,pThis) => {  
                    var viewWidth = event.nativeEvent.layout.width;  
                    var viewHeight = event.nativeEvent.layout.height;  
      
                    if (!viewWidth || this.state.containerWidth === viewWidth) {  
                        return;  
                    }
                    this.setState({  
                        containerWidth: viewWidth, 
                        containerHeight: viewHeight
                    }); 
    
              }
            >
    
            </PhotoPicker>
          );
    
          valueArray.push(
            myImage
          );
    

    此代码是读取到表单json后动态生成表单的代码。
    PhotoPicker组件负责图片的选取和预览。

    PhotoPicker中子组件的高度发生变化后,会调用onLayout回调,onLayout回调中获取最新的高度,并将高度设置给PhotoPicker的style。

    如果在PhotoPicker添加ref=”photopicker_ref“会直接报错
    0_1508912311771_WX20171025-141801@2x.png

    如果ref设置为ref= {component => this.photoPickerRef = component}
    修改样式时

    this.photoPickerRef.setNativeProps({   //这里输入你要修改的组件style
          height:viewHeight,
          backgroundColor:'red'
    });
    

    0_1508912462383_WX20171025-142042@2x.png
    表单项是动态生成的 this.photoPickerRef没有办法写死的。

    请问除了ref之外还有什么方法可以获取到指定的组件?



  • 通过 ref 改变目标组件的状态,react 根本就不会让你这么做。你只能通过传递 props,或调用组件方法。如果你这里的 PhotoPicker 是个第三方组件,而且不提供想要的方法,要么放弃,要么 hack。


登录后回复