Reactjs 反应、重做和反应动作

应用程序内：

在FramesCollection中：

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

render（）{
const{selectedItem，menuItems}=this.props.bottomMenu
const col=menuItems.length
常数springSettings={刚度：170，阻尼：26}；
返回(
{React.Children.map(
这个，道具，孩子们，
（孩子，我）=>{
if（子道具中的“速度”）{
常量宽度=数学圆（child.props.speed*col*2000）
常量样式={width:width，translateX:spring（-width*selectedItem，springSettings）}
返回
{child}
}否则{
返回儿童；
}
})
}
)
}

代码编译时没有错误，但除了浏览器之外，我看到了两个错误：

警告：失败的道具类型：无效的道具

对象类型的子道具

提供给
运动
，应为
功能
。动态（由
FramesCollection（由创建）中的FramesCollection
连接（框架集合）（由创建）中的连接（框架集合）
应用程序）在div中（由应用程序创建）在应用程序中（由Connect（应用程序）创建）在
在提供程序中的div中连接（应用程序）

及

未捕获类型错误：this.props.children不是
ReactCompositeComponent处的Object.render（Motion.js:235）。js:796处
在以下位置测量fectycleperf（ReactCompositeComponent.js:75）
ReactCompositeComponentWrapper.\u RenderValidatedComponentWithout Owner或Context
（ReactCompositeComponent.js:795）位于
ReactCompositeComponentWrapper.\u renderValidatedComponent
（ReactCompositeComponent.js:822）位于
ReactCompositeComponentWrapper.PerformitialMount
（ReactCompositeComponent.js:362）位于
ReactCompositeComponentWrapper.mountComponent
（ReactCompositeComponent.js:258）位于Object.mountComponent
（ReactReconciler.js:46）位于ReactDOMComponent.mountChildren
（ReactMultiChild.js:238）位于ReactDOMComponent.\u createInitialChildren
（ReactDOMComponent.js:697）

我做错了什么？
我自己才刚刚开始，但我认为你的问题可能相当直截了当。当我在文档中查看时，似乎Motion中的子元素需要是一个函数

我脑海中的翻译：

“它不想让孩子知道该如何处理这个孩子。因此开发人员只需要给出一个函数，将孩子作为参数，并在元素中返回这个孩子。”

我想你需要做的就是改变：

{child}

到

{child=>}

在上面的代码中

从react运动文档：


{InterpolingStyle=>}

因此，以“InterpolingStyle”开头的JSX函数将替换代码中的“{child}”。当您这样做时，它看起来像这个位“style={{x:spring（10）}}”将被解释，并且它返回的计算将成为“interpolingstyle”的值。“InterpolationStyle”函数的部分要求似乎是指定一个子元素来渲染插值样式将应用到的子元素（div）

再次从文档中：

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


...
-子元素：（interpolatedStyle:PlainStyle）=>ReactElement
必需的功能。
interpolatedStyle：传递给您的插值样式对象。
例如，如果您给出style={{x:spring（10），y:spring（20）}，您将
作为插值样式接收，在某个时间，{x:5.2，y:12.1}，
然后你可以申请你的div或者其他什么。
Return：必须返回一个React元素进行渲染。

确保签出“运动元素”部分中的文档。这是一个2分钟的阅读，它是可以理解的（我经常努力理解文档）

动作道具：


样式：必填项。一个物体**阅读这一部分，在你使用它之前看起来很棘手
默认样式：可选。映射到数字。**阅读这一部分，这并不棘手，但在你尝试之前很难解释（比如风格）
儿童：必填项。函数（见上文）
onRest：可选。动画停止时激发的回调
文档非常清楚，其中包含示例代码，您要将函数传递给Motion。这也恰好是错误所说的。请给出详细的答案。我什么都不懂。
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>

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