Question

我是Typescript React的新手。在将以下React JS代码转换为Typescript React时需要帮助。我对如何将道具传递给子功能感到很困惑。

反应JS

blog.js

    import contentarea from './contentarea.js';
    export default function Blog() {
    return (
    <contentarea wid={12} hei={6}>
    </contentarea>
    );
    }

contentarea.js

   import PropTypes from "prop-types";
   export default function contentarea(props) {
   const { children, ...rest } = props;
   return (
   <contentarea  {...rest}>
   {children}
   </contentarea>
   );
   }    

   contentarea.propTypes = {
   children: PropTypes.node
   };

谢谢！

Answer 1

这不是打字稿专用的，如果我对您的问题的理解是正确的，您希望将wid和hei传递给“子代”中的组件，以便可以将其包装在HOC下

const PropWrapper = (WrappedComponent, givenProps) => {
const hocComponent = ({ ...props }) => <WrappedComponent {...props} {...givenProps} />

hocComponent.propTypes = {
}

return hocComponent}

在渲染孩子之前先使用

<contentarea>{PropWrapper(children, rest)}</contentarea>

希望有帮助

TypeScript React：如何将所有道具传递给子函数

1 个答案: