Question

在我的main.js中，此代码用于绘制我的ticksX行...

main.js

  <Svg height={Metrics.height + Metrics.margin.bottom} width={Metrics.width + Metrics.margin.right + Metrics.margin.left}>
    {
      ticksX.map((tick, idx) => {
        var pos = xScale(new Date(tick))
        return (
          <G key={pos}>
            <Line x1={pos + lineDx} x2={pos + lineDx} y1='0' y2={Metrics.yAxisHeight} stroke={colors.purple} strokeDasharray='5, 5' strokeWidth='1' />
            <Text x={pos + Metrics.xLabelPadding} y={Metrics.xLabelHeightDDD} fill={colors.gray} fontSize='10'>{moment(tick).format('ddd')}</Text>
            <Text x={pos + Metrics.xLabelPadding} y={Metrics.xLabelHeightMMM} fill={colors.gray} fontSize='10'>{idx === 0 || idx === ticksX.length - 1 ? moment(tick).format('MMM D') : ''}</Text>
          </G>
        )
      })
    }
  </Svg>

然而，当我把它放在一个像这样的辅助函数文件中时，为什么没有任何一行抽出：

helperfunction.js

export const drawGraph = {
ticksX: (xScale, ticksX, lineDx) => {
    ticksX.map((tick, idx) => {
      var pos = xScale(new Date(tick))
      return (
        <G key={pos}>
          <Line x1={pos + lineDx} x2={pos + lineDx} y1='0' y2={Metrics.yAxisHeight} stroke={colors.purple} strokeDasharray='5, 5' strokeWidth='1' />
          <Text x={pos + Metrics.xLabelPadding} y={Metrics.xLabelHeightDDD} fill={colors.gray} fontSize='10'>{moment(tick).format('ddd')}</Text>
          <Text x={pos + Metrics.xLabelPadding} y={Metrics.xLabelHeightMMM} fill={colors.gray} fontSize='10'>{idx === 0 || idx === ticksX.length - 1 ? moment(tick).format('MMM D') : ''}</Text>
        </G>
      )
    })
  }
}

main.js

<Svg height={Metrics.height + Metrics.margin.bottom} width={Metrics.width + Metrics.margin.right + Metrics.margin.left}>
    {drawGraph.ticksX(xScale, ticksX, lineDx)}
</Svg>

Answer 1

在你的助手中，替换

ticksX.map((...) => { ... })

使用

ticksX.map((...) => (...))

React Native：Helper函数不绘制我的线条

1 个答案: