反应过渡

Question

我正在尝试在切换转换中映射幻灯片并收到错误“错误：React.Children.only 预期会收到单个 React 元素子项。”

我做错了什么？

Slider.Body = function SliderBody({ data, children, ...rest }) {
  return (
    <SwitchTransition mode={"out-in"}>
      <TransitionGroup>
        {data.map((item) => {
          return (
            <CSSTransition classNames="fade" key={item.image}>
              {item.toString()}
            </CSSTransition>
          );
        })}
      </TransitionGroup>
    </SwitchTransition>
  );
};

Answer 1

将要映射的数据包装在一个 div 中。所以它应该看起来像这样 -

Slider.Body = function SliderBody({ data, children, ...rest }) {
  return (
    <SwitchTransition mode={"out-in"}>
      <TransitionGroup>
        <div>
        {data.map((item) => {
          return (
            <CSSTransition classNames="fade" key={item.image}>
              {item.toString()}
            </CSSTransition>
          );
        })}
        </div>
      </TransitionGroup>
    </SwitchTransition>
  );
};

Answer 2

问题是<TransitionGroup> 组件中不能有多个项目，因此解决方案是将映射函数包装在HTML element 中。

您也可以使用<React.Fragment> 并将您的地图函数包装在其中。

让我们看一下使用<React.Fragment>的例子：

Slider.Body = function SliderBody({ data, children, ...rest }) {
  return (
    <SwitchTransition mode={"out-in"}>
      <TransitionGroup>
        <React.Fragment>
        {data.map((item, i) => {
          return (
            <CSSTransition classNames="fade" key={i}>
              {item.toString()}
            </CSSTransition>
          );
        })}
        </React.Fragment>
      </TransitionGroup>
    </SwitchTransition>
  );
};

你可以找到更多关于 Fragments here.