我正在尝试从任何数组声明并返回多个HOC,但是始终返回“函数作为React子代无效。”错误。有人遇到过这个问题吗?
JS:
....
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const withRequestAnimationFrame = () => WrappedComponent => {
class RequestAnimationFrame extends Component {
state = {
timeStamp: 0,
newItem: "Test"
};
componentDidMount() {
const min = 1;
const max = 100;
const rand = Math.floor(Math.random() * (max - min + 1)) + min;
this.setState({ timeStamp: this.state.timeStamp + rand });
}
render() {
return (
<WrappedComponent {...this.state} {...this.props} />
)
}
}
return RequestAnimationFrame;
};
const App = ({ timeStamp, newItem }) => (
<div style={styles}>
<h1>{timeStamp}</h1>
<p>{newItem}</p>
</div>
);
const arrayItems = ["EnhancedApp", "EnhancedApp2"];
const Products = ({ items }) => {
return (
items.map((item, index) => (
item = withRequestAnimationFrame()(App)
))
)
};
function Product() {
return (
<div>
<Products items={arrayItems} />
</div>
)
}
render(<Product />, document.getElementById("root"));
此行是问题:
item = withRequestAnimationFrame()(App)
您在这里所做的是将withRequestAnimationFrame()(App)函数的结果分配给绝对不是您想要的项目。我假设您想在那里渲染withRequestAnimationFrame组件的多个实例。您可以这样:
withRequestAnimationFrame(item)(App)