0

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的道具类型无效，应为。in Motion（由 FramesCollection 创建） in FramesCollection（由 Connect(FramesCollection) 创建） in Connect(FramesCollection)（由 App 创建） in div（由 App 创建） in App（由 Connect(App) 创建）在 Connect(App) 中提供者中的 divobjectMotionfunction

和

Uncaught TypeError: this.props.children is not a function at Object.render (Motion.js:235) at ReactCompositeComponent.js:796 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) 在 ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 在 ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 在 Object.mountComponent (ReactReconciler.js:46) 在 ReactDOMComponent.mountChildren (ReactMultiChild. js:238) 在 ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

我究竟做错了什么？

4

1 回答 1

0

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

在我的脑海中翻译：

“它不希望孩子知道如何处理那个孩子。因此开发人员只需要提供一个函数，该函数将孩子作为参数并在元素中返回该孩子。”

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

{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>

因此，以“interpolatingStyle”开头的 JSX 函数将替换代码中的“{child}”。当你这样做时，看起来这个位“style={{x: spring(10)}}”将被解释并且它返回的计算成为“interpolatingStyle”的值。看起来“interpolatingStyle”函数的部分要求是指定一个要渲染的子元素（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 element 部分的文档。这是一个 2 分钟的阅读，它是可以理解的（我经常难以理解文档）。

运动道具：

  • 风格：必填。An Object ** 阅读这部分，在你使用它之前似乎很棘手。
  • 默认样式：可选。映射到数字。** 阅读这部分，它并不难，但在你尝试之前很难解释（比如风格）
  • 儿童：需要。一个函数（见上文）
  • onRest：可选。动画停止时触发的回调
于 2017-07-02T17:58:54.217 回答