react的高阶组件中我怎么把传进来的组件原样返回去
时间: 2023-09-20 19:09:09 浏览: 100
在 React 的高阶组件中,你可以使用 `props` 参数来传递被包装组件的属性。如果你想将原始组件原样返回,你可以将这些属性传递给原始组件。以下是一个例子:
```
import React from 'react';
const myHOC = (WrappedComponent) => {
return (props) => {
return <WrappedComponent {...props} />;
};
};
export default myHOC;
```
在这个例子中,我们创建了一个名为 `myHOC` 的高阶组件。这个高阶组件将传递给它的原始组件(`WrappedComponent`)原样返回。在返回中,我们使用展开操作符 `...props` 将传递给高阶组件的属性传递给原始组件。
你可以将这个高阶组件应用于任何你想要包装的组件中。例如:
```
import React from 'react';
import myHOC from './myHOC';
const MyComponent = (props) => {
return <div>{props.text}</div>;
};
export default myHOC(MyComponent);
```
在这个例子中,我们将 `MyComponent` 组件传递给 `myHOC` 高阶组件,并将返回的结果导出为 `MyComponent` 组件。`MyComponent` 组件将被原样返回,但是被 `myHOC` 包装了一下。由于我们在 `myHOC` 中将传递给高阶组件的属性原样传递给了原始组件,所以在使用 `MyComponent` 组件时,我们可以像平常一样传递属性:
```
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent text="Hello, world!" />;
};
export default App;
```
希望这个例子可以帮助你理解如何在 React 的高阶组件中将原始组件原样返回。
阅读全文