Question

例如，假设我有以下路线：

<Switch>
  <Route path='/login' component={Login} />
  <Route path='/home' component={HomePage} />
  <Route path='/profile' component={Profile} />
</Switch>

我想将这些组件包装在div中，以使用一种样式和一个新的prop，并使用一个更可重用的函数，如下所示：

<Switch>
  <Route path='/login' component={wrapper(Login, 'red')} />
  <Route path='/home' component={wrapper(Home, 'blue')} />
  <Route path='/profile' component={wrapper(Profile, 'green')} />
</Switch>

其中的包装应该是这样的：

const wrapper = (component, color) => {
  return (
    <div className='container'>
       <Component color={color} />
    <div>
  )
}

那怎么可能？我尝试了一些替代方法，例如：

const wrapper = (component, text) => {
  return React.cloneElement(component, {color: text})
 }

但是不确定我如何使用React.cloneElement或任何其他模式来做到这一点。

Answer 1

您可以使用oR_pos_function <- function(y) { n <- seq(1, 2, 0.5) y[paste0("oR_pos>", n, "sd")] <-lapply(n, function(x) ifelse(x$return > mean(x$return)+ sd(x$return),x$return, NA)) y } map(mget(list_cryptocurrencies), oR_pos_function)%>% set_names(list_cryptocurrencies)%>% list2env(envir = .GlobalEnv)道具代替render道具，然后将component道具传递给组件。

color

如何通过React.cloneElement使用函数包装React组件？

1 个答案: