将道具传递给儿童缺少的道具

Question

如何将道具传递给孩子们？

const Tabs = ({ children, props }) => {
  console.log(props) //where is activeTab??
  return React.Children.map(children, child =>
    React.cloneElement(child, { ...props })
  )
}

const App = () => {
  return (
    <Tabs activeTab={1}>
      <div>tabs children</div>
    </Tabs>
  );
};

期望道具是一个对象，其activeTab等于1，但是上面的代码给了我未定义的内容？

https://codesandbox.io/s/vnz4z84vq7

Answer 1

您不需要在这里进行销毁。 像这样接受props

const Tabs = ( props ) => {
// ... props.children - is your children object
}

如果您想使用解构，那就是这样

const Tabs = ( {children, activeTab } ) => {
// now children and activeTab is passed props
}

Answer 2

无论activeTab和children将被传递到你的组件作为属性props参数，所以访问它们只是改变你的组件：

const Tabs = (props) => {
  console.log(props.activeTab);
  console.log(props.children);
  return React.Children.map(children, child =>
    React.cloneElement(child, { ...props })
  )
}

或者如果您想破坏结构，可以写

const Tabs = ({ children, activeTab, ...props }) => { 
   console.log(activeTab);
   console.log(children);
   return React.Children.map(children, child =>
     React.cloneElement(child, { ...props })
   )
}