Tuya Developer Forum

由于是旧项目，需要维护，所以暂时还没有迁移到小程序
设计目标，在弹窗页面中，通过滑动条和TouchOpacity来修改testValue，并通过Text显示

测试结果发现：拖动滑条后通过加减，Text的组件均不会发生改变，通过日志是可以发现testValue的值有修改成功的


  /* 以下是代码示例片段 */

_popupView=()=>{

    const {testValue}=this.state;

   const ActiveThemeColor = '#0277ED';

    Popup.custom({

      title:"测试",

      content:(

        <View style={{width:'100%',height:cx(320),backgroundColor:'#ffffff',borderRadius:cx(10),padding:cx(20),display:'flex',flexDirection:'column'}}>

          <View  style={{width:'100%',height:cx(60),display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>

            <Text style={{fontSize:12,color:'#3B4051',height:cx(15)}}>{(testValue-100)/10}%</Text>

            <View style={{width:'100%',height:cx(40),display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginBottom:cx(10)}}

              onPress={()=>{

                let value = testValue-10;

                if(value<0){

                  value=0;

                }

                this.setState({

                  testValue:value

                })

              }}

            >

              <TouchableOpacity style={{width:'5%',backgroundColor:ActiveFontColor,justifyContent:'center',alignItems:'center',borderRadius:cx(6)}}>

                <Text style={{color:'white',fontSize:Math.max(13, cx(13)),fontWeight:'400'}}>-</Text>

              </TouchableOpacity>

              <Slider value={testValue} onValueChange={(value)=>{

                    console.log('滑动了'+value)

                    this.setState({

                      testValue:value

                    })

                  }

                } 

                style={{width:'80%',height:cx(40)}}

                minimumValue={0} 

                maximumValue={200} 

                stepValue={1}

                minimumTrackTintColor={ActiveThemeColor}

                thumbTintColor={ActiveThemeColor}

                thumbStyle={{borderWidth:6,backgroundColor:'white',borderColor:ActiveThemeColor}}

              />

              <TouchableOpacity style={{width:'5%',backgroundColor:ActiveFontColor,justifyContent:'center',alignItems:'center',borderRadius:cx(6)}}

                onPress={()=>{

                  let value = testValue+10;

                  if(value>200){

                    value=200;

                  }

                  this.setState({

                    testValue:value

                  })

                }}

              >

                <Text style={{color:'white',fontSize:Math.max(13, cx(13)),fontWeight:'400'}}>+</Text>

              </TouchableOpacity>

            </View>

          </View>



    </View>

  ),

  onMaskPress:({close})=>{close()},

  motionType:'none',

  footer: <View style={{marginBottom:cx(10)}}></View>,

})



  }

问题原因

这在 React 中是符合预期的现象，因为 Popup.custom 是一个静态方法，通常是在某个事件（比如点击按钮）发生时被调用，然后创建并渲染一个组件。这个组件在创建时接收到的children是当时传入的 React 元素，这些元素在创建时已经固定了（闭包了当时的 props 和 state）。之后，即使父组件的状态发生变化，这个已经渲染的对话框组件并不会自动接收到更新后的children，因为它并不是父组件渲染树的一部分，而是通过 Portal 或者直接挂载到其他 DOM 节点的方式独立存在的。

解决方案

方案 1：使用受控组件模式

Code: Select all

// 在父组件中维护弹出层的状态
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>打开弹窗</button>
      
      {open && (
        <Modal>
          <Content count={count} /> {/* 随父组件更新自动重渲染 */}
        </Modal>
      )}
    </>
  );
}

方案 2：状态提升 + 全局状态管理

将 Popup.custom 参数的 content 字段抽离成一个 Content 组件，Content 组件内部通过 Redux 或 context 之类的方案监听全局状态的变更。

看懂了，谢谢大佬，明天我试一下。