Question

在APP中：

<FramesCollection>
      <Frames1 speed='1.0' width='auto' zIndex='1' />
      <Frames2 speed='1.2' width='auto' zIndex='1' />
      <Frames3 speed='1.4' width='auto' zIndex='1' />
      <Frames4 speed='1.6' width='auto' zIndex='1' />
      <Frames5 speed='2.0' width='auto' zIndex='4' />
      <Frames6 speed='2.5' width='auto' zIndex='3' />
      <Rails />
</FramesCollection>

在FramesCollection中：

    render() {
        const { selectedItem, menuItems } = this.props.bottomMenu
        const col = menuItems.length
        const springSettings = { stiffness: 170, damping: 26 };

        return (
            <aside className='frames-collection' ref='framesCollection'>

                {React.Children.map(
                    this.props.children,
                    (child, i) => {
                        if ('speed' in child.props) {

                            const width = Math.round(child.props.speed * col * 2000)
                            const style = { width: width, translateX: spring(-width * selectedItem, springSettings) }

                            return <Motion key={i} style={style}>
                                {child}
                            </Motion>

                        } else {
                            return child;
                        }
                    })
                }

            </aside>
        )
    }

代码编译时没有错误，但在添加浏览器时我看到2个错误：

警告：道具类型失败：children类型的道具object无效提供给Motion，预计function。 in Motion（由。创建） FramesCollection中的FramesCollection）（由 Connect（FramesCollection）中的Connect（FramesCollection））（由 App）中的div（由App创建）（由Connect（App）创建）在提供商
中的div中连接（App）

并且

未捕获的TypeError：this.props.children不是函数 ReactCompositeComponent.js中的Object.render（Motion.js：235）：796 at measureLifeCyclePerf（ReactCompositeComponent.js：75）at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext （ReactCompositeComponent.js：795）at ReactCompositeComponentWrapper._renderValidatedComponent （ReactCompositeComponent.js：822）at ReactCompositeComponentWrapper.performInitialMount （ReactCompositeComponent.js：362）at ReactCompositeComponentWrapper.mountComponent （Object.mountComponent上的（ReactCompositeComponent.js：258）（ReactReconciler.js：46）在ReactDOMComponent.mountChildren （ReactMultiChild.js：238）在ReactDOMComponent._createInitialChildren （ReactDOMComponent.js：697）

我做错了什么？

Answer 1

我自己刚刚开始这个，但我认为你的问题可能相当简单。当我查看文档时，看起来Motion中的子元素需要是一个函数。

我的翻译：

＆＃34;它不希望孩子想知道该孩子应该怎么做。因此，开发人员只需要提供一个以子为参数的函数，并将该子元素返回给元素。＆＃34;

我认为您需要做的就是改变：

{child}

到

{child => <div style={child} />}

在上面的代码中。

来自react-motion文档： https://github.com/chenglou/react-motion#motion-

<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>

所以JSX函数以＆＃34; interpolatingStyle＆＃34;开头。将取代＆＃34; {child}＆＃34;在你的代码中。当你这样做时，它看起来就像＃34; style = {{x：spring（10）}}＆＃34;将被解释，它返回的计算变为＆＃34; interpolatingStyle＆＃34;的值。它看起来像＆＃34; interpolatingStyle＆＃34;的要求的一部分。 function是指定一个要渲染的子元素（div），插值样式将应用于该元素。

再次来自文档：

<Motion />
...

- children: (interpolatedStyle: PlainStyle) => ReactElement

Required function.

interpolatedStyle: the interpolated style object passed back to you.    
E.g. if you gave style={{x: spring(10), y: spring(20)}}, you'll
receive as interpolatedStyle, at a certain time, {x: 5.2, y: 12.1},
which you can then apply on your div or something else.

Return: must return one React element to render.

请务必查看Motion元素部分的文档。这是一个2分钟的阅读，这是可以理解的（我经常努力理解文档）。

动作道具：

风格：必填。一个对象**阅读这部分，在你使用它之前似乎很棘手。
defaultStyle ：可选。映射到数字。 **阅读本部分，它并不棘手，但在你尝试之前很难解释（如风格）
儿童：必填。功能（见上文）
onRest ：可选。动画停止时触发的回调

反应，还原和反应运动

1 个答案: