Javascript 反应高阶组件，修改其中已包装组件的输入元素

我有一个像这样的高阶分量

import React from 'react';

const NewComponent = ( WrappedComponent ) => {
    class UpdatedComponent extends React.Component {
        render() {
           // Custom Hook
           // const values = useCustomHook(InitialState);
            return(
                <WrappedComponent />
            )
        }
    }
    return UpdatedComponent;
};

export { NewComponent };

从“React”导入React；
常量新组件=（WrappedComponent）=>{
类UpdatedComponent扩展了React.Component{
render（）{
//定制挂钩
//常量值=useCustomHook（初始状态）；
返回(
)
}
}
返回更新组件；
};
出口{NewComponent}；

还有像这样的包装组件

const App = () => {

    return(
        <Form>

            <input
                type = 'text'
                placeholder = 'Enter your name' />

            <input
                type = 'email'
                placeholder = 'Enter your email' />

            <button
                type = 'submit'>
                    Submit
            </button>

        </Form>
    )
}

const-App=（）=>{
返回(
提交
)
}

---

问题是我想迭代包装组件中的输入元素并构造一个复合状态，我将把一个参数传递给hoc中的定制钩子？有没有办法实现这一功能？

我认为您不应该解析jsx并从中创建数据，但您还没有真正演示为什么需要这样做，并且可能有一个有效的用例

下面是如何解析jsx（由其创建的html）：

const useCustomHook=（state）=>{
如果（状态！==null）{
log（'自定义挂钩，状态为：'，状态）；
}
};
常量形式=（{children}）=>{
const[state，setState]=React.useState（null）；
const ref=React.useRef（）；
useCustomHook（州）；
React.useffect（（）=>{
调试器；
设定状态(
Array.from（ref.current.querySelectorAll（'input'））.map(
（{type，placeholder}）=>({
类型，
占位符，
})
)
);
}, []);
返回{children}；
};
常量应用=（）=>{
返回(
提交
);
};
ReactDOM.render（，document.getElementById（'root'））

请展示更多示例，您告诉我们关于带有输入元素的表单-您能展示一个用法示例吗，期望的结果是什么，即在HOCY之后from应该是什么样子？您实际上不需要一个更高阶的组件来实现这一点，并且您应该已经有了一个基于
WrappedComponent
中表单的状态，因为输入元素应该在React中。如果你能弄清楚你的最终目标是什么，你想达到什么？丹尼斯瓦什：我已经编辑了描述。仍然请检查itOk，在HOC之后表单应该是什么样子表单将是相同的，我将把从HOC中的定制钩子返回的值作为道具传递给包装组件。