时间戳

首页 > 解决方案 > 数据变化时如何渲染子功能组件？

reactjs - 数据变化时如何渲染子功能组件？

问题描述

我导入了一个函数组件 B，onChange或者onComplete当 B 中的数据只发生变化时可以重新渲染 B。

乙：

const B = (props) => {
  const { lightValue } = props;
  console.log('lightValue is', lightValue);
  const [brightness, setBrightness] = useState(lightValue);

  const returnLightValue = (value) => {
    props.callBack(value);
  };

  return (
    <VerticalSlider
      value={brightness}
      onChange={(value) => returnLightValue(value)}
      onComplete={(value) => {
        returnLightValue(value);
        setBrightness(value);
      }}
      {...other props}
    />
  );
}

当我触发onChange或onComplete从 B 触发时，我可以获取要在 A 中使用的数据并且<Text />可以重新渲染：

import B from './B';

const A = () => {
  const [brightness, setBrightness] = useState(0); //

  return (
    <View>
      <Text>Show the value is {brightness}</Text>
      <B
        lightValue={brightness}
        callBack={(value) => setBrightness(value)}
      />
      <Button 
        onPress={() => {
          if (someCondition) {
            setBrightness(50);
          } else {
            setBrightness(0);
          }
        }}
      />
    </View>
  );

但我的问题是，如果我只是单击<Button />A 中的，我可以看到console.log('lightValue is', lightValue);B 中的变化，但<VerticalSlider />不会重新渲染。

我尝试将布尔道具从 A 发送到 B 并设置类似 forceUpdate 的内容，但这会导致重新渲染出现很多错误。

我不知道如何实现它，有什么想法吗？谢谢。

标签： reactjsreact-nativereact-hooks

解决方案

我认为您的问题是您在两个组件中使用了不同的状态。所以你实际上引用了两个不同的状态。

我会将所有状态提升到 A 并使用 B 只是一个子组件。像这样的东西。

乙

const B = (props) => {
const { brightness, setBrightness } = props;
console.log('lightValue is', brightness);

 return (
    <VerticalSlider
      value={brightness}
      onChange={(value) => setBrightness(value)}
      onComplete={(value) => setBrightness(value)}
      {...other props}
    />
  );
}

一个

import B from './B';

const A = () => {
  const [brightness, setBrightness] = useState(0); //

  return (
    <View>
      <Text>Show the value is {brightness}</Text>
      <B
        brightness={brightness}
        setBrightness={setBrightness}
      />
      <Button 
        onPress={() => {
          if (someCondition) {
            setBrightness(50);
          } else {
            setBrightness(0);
          }
        }}
      />
    </View>
  );

我们在这里所做的是在父组件中声明一个状态。无论孩子或父母改变此状态，所有相关组件都会自动更新。

让我知道它是否有效。

推荐阅读