はReduxの、反応して反応モーションAPPにおいて

Question

：

<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> 
     ) 
    } 

コードがエラーなしでコンパイルされているが、ブラウザのほかにI 2つのエラーを参照してください。

Warning: Failed prop type: Invalid prop children of type object supplied to Motion , expected function . in Motion (created by FramesCollection) in FramesCollection (created by Connect(FramesCollection)) in Connect(FramesCollection) (created by App) in div (created by App) in App (created by Connect(App)) in Connect(App) in div in Provider

そして

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) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) at Object.mountComponent (ReactReconciler.js:46) at ReactDOMComponent.mountChildren (ReactMultiChild.js:238) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

私は間違っていますか？

Answer 1

私はちょうどこれを自分自身で始めていますが、私はあなたの問題がかなり正直であるかもしれないと思います。ドキュメントを見ると、Motion内の子要素のように見えますが、関数でなければなりません。私の頭の中で

翻訳：

「それはあの子に何をすべきかを知りたがっている子供を望んでいない開発者は、単に引数として子を取る機能を付与する必要があるように。その要素を要素に返します。上記のコードで

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

へ

{child}

：

私ははがすべてを行う必要が変化すると思います。反応する動きをドキュメントから

： https://github.com/chenglou/react-motion#motion-

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

だから、 "interpolatingStyle" で始まるJSX機能は、あなたのコード内で "{子を}" 置き換えます。あなたがそうすると、このビットのように見えます。 "style = {{x：spring（10）}}"は解釈され、返される計算は "interpolatingStyle"の値になります。 "interpolatingStyle"関数の要件の一部のように見えるのは、補間されたスタイルを適用する1つの子要素（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. 

はモーション素子部の上にドキュメントをチェックアウトすることを確認します。それは2分の読書であり、わかりやすい（私はかなり頻繁に文書を理解するのに苦労している）。

モーション小道具：

• スタイル：必要。オブジェクト**この部分を読むと、使用するまで難しいようです。
• defaultStyle：オプションです。数字に対応する。**この部分を読むのは難しいことではありませんが、試してみるまで説明するのは難しいです（スタイルのように）
• 子供：必須です。関数（上を参照）
• onRest：オプションです。アニメーションが休止したときにコールバックが発生する