使用带有功能组件的自定义容器

Question

我定义了一个自定义容器：

const CombinedContainer = createContainer("selection", "voronoi");

const selectionStyle = {
  fill: "transparent",
  fillOpacity: 0.5,
  stroke: "red",
  strokeWidth: 1
}

type Props = {}

const ChartContainer = (props: Props) => (
  <CombinedContainer
    // @ts-ignore
    cursorDimension="x"
    selectionDimension="x"
    selectionStyle={selectionStyle}
    labels={({datum}) => `${datum.x}, ${datum.y.toFixed(2)} ${datum.volume}`}
  />
)

export default ChartContainer;

并像这样使用它：

<VictoryChart
  width={width}
  padding={padding}
  minDomain={{ y: 70 }}
  maxDomain={{ y: dataSet.maxDomain }}
  containerComponent={<ChartContainer />}
>
  ...
</VictoryChart>

但这不会渲染任何东西，除非我像普通函数一样使用它：

<VictoryChart
  width={width}
  padding={padding}
  minDomain={{ y: 70 }}
  maxDomain={{ y: dataSet.maxDomain }}
  containerComponent={ChartContainer({})}
>
  ...
</VictoryChart>

我以前定义过类似的功能组件并使用它们没有任何问题，但我看不出我在这里做错了什么。谁能帮帮我？

为什么 <ChartContainer /> 不起作用但 ChartContainer() 起作用？

createContainer函数定义为：

export type ContainerType =
  | "brush"
  | "cursor"
  | "selection"
  | "voronoi"
  | "zoom";
export function createContainer<V, W>(
  c1: ContainerType,
  c2: ContainerType
): React.ComponentType<V & W>;

这里是测试它的示例项目：

https://github.com/olcayertas/victory-functional-container-componenet

Answer 1

它不起作用，因为 ChartContainer 没有传递接收到的道具（并且没有 render the children）。

所以 {...props} CombinedContainer:

const ChartContainer = (props: Props) => (
  <CombinedContainer
    // @ts-ignore
    cursorDimension="x"
    selectionDimension="x"
    selectionStyle={selectionStyle}
    // @ts-ignore
    labels={({ datum }) =>
      `Date: ${datum.date}\nPrice: $${datum.close.toFixed(2)}\nVolume: ${
        datum.volume
      }`
    }
    {...props}
  />
);

Working example

使用带有功能组件的自定义容器

Using custom container with functional component

typescript

reactjs

victory-charts

react-functional-component