React Native中VictoryBar组件range属性无效报错求助

报错信息 #

Warning: Failed prop type: Invalid prop `range` supplied to `VictoryBar`.
    at VictoryBar
    in VictoryStackBase (created by VictoryStack)

问题场景 #

在React Native中使用VictoryBar嵌套在VictoryStack组件内时出现上述警告，手动为VictoryBar添加range属性后问题依然存在。

问题原因 #

VictoryStack作为容器组件，会自动向子组件（如VictoryBar）传递range属性以统一管理布局坐标，但这个自动传递的range格式不符合VictoryBar的prop校验要求。同时，若子组件VictoryBar单独设置了domain等布局属性，会和VictoryStack传递的range产生冲突，进一步触发这个警告。

解决方法 #

方法1：为VictoryBar添加standalone={false} #

当VictoryBar作为VictoryStack的子组件时，设置standalone={false}可以让VictoryStack全权负责布局和坐标转换逻辑，VictoryBar不再独立校验range属性的格式，从而消除警告：

<VictoryStack
  horizontal={true}
  width={310}
  height={90}
  alignment="start"
  colorScale={graphicColorDeploy}
  style={{
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#a00',
  }}
  padding={{ top: 80, bottom: 10, left: 0 }}
>
  <VictoryBar
    standalone={false}
    alignment="start"
    height={40}
    barWidth={38}
    domain={{ x: [0, 3], y: [0, maxCtLtLtaChart] }}
    cornerRadius={{ topLeft: 5, topRight: 5 }}
    data={[wantedGraphicDataDeployCt[0]]}
    events={[
      {
        target: 'data',
        eventHandlers: {
          onPressIn: () => {
            return [
              {
                target: 'data',
                mutation: dataProps => {
                  return {};
                },
              },
            ];
          },
        },
      },
    ]}
    labels={() => null}
  />
</VictoryStack>

方法2：将domain属性移至VictoryStack #

把原本在VictoryBar上设置的domain统一放到VictoryStack组件中，让容器统一管理坐标范围，避免子组件和容器的布局属性冲突：

<VictoryStack
  horizontal={true}
  width={310}
  height={90}
  alignment="start"
  colorScale={graphicColorDeploy}
  style={{
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#a00',
  }}
  padding={{ top: 80, bottom: 10, left: 0 }}
  domain={{ x: [0, 3], y: [0, maxCtLtLtaChart] }}
>
  <VictoryBar
    alignment="start"
    height={40}
    barWidth={38}
    cornerRadius={{ topLeft: 5, topRight: 5 }}
    data={[wantedGraphicDataDeployCt[0]]}
    events={[
      {
        target: 'data',
        eventHandlers: {
          onPressIn: () => {
            return [
              {
                target: 'data',
                mutation: dataProps => {
                  return {};
                },
              },
            ];
          },
        },
      },
    ]}
    labels={() => null}
  />
</VictoryStack>

说明 #

Victory系列组件的容器（如VictoryStack、VictoryGroup）会自动协调子组件的布局参数，子组件单独设置布局相关属性时容易出现参数冲突。优先让容器统一管理布局属性，或通过standalone={false}关闭子组件的独立布局校验，是解决这类问题的常用思路。

内容的提问来源于stack exchange，提问作者menaa ghassen