アプリで:
<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) で作成) in Connect(App) inプロバイダーの divobject
Motion
function
と
キャッチされていない TypeError: this.props.children は、Object.render (Motion.js:235) の関数ではありません。 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) で
私は何を間違っていますか?