条件不被命中 - 有条件渲染反应组件

Question

我不确定为什么无论isAuthenticated是否为假，它总是最终渲染而不是击中。当isAuthenticated为false时，您认为它显然会出现重定向，但事实并非如此。

import numpy as np
def numpy_fillna(data):

    lens = np.array([len(i) for i in data])
    mask = np.arange(lens.max()) < lens[:,None]

    out = np.zeros(mask.shape, dtype=data.dtype)
    out[mask] = np.concatenate(data)
    return out

a =np.array([range(1,50),range(50,150)])
data=numpy_fillna(a)

print data[1,:]

这是我在调试时在WebStorm中看到的RouteToRender的内容：

我所做的只是强制重定向，我注意到我还必须删除{... this.props}和状态：{from：this.props.location}并且这有效：

class ProtectedRoute extends Component {
  render() {
    console.log(`ProtectedRoute: isAuthenticated: ${this.props.isAuthenticated}`)
    const ComponentToRender = this.props.component,
    RouteToRender = (
      <Route
        {...this.props}
        render={() =>
          (this.props.isAuthenticated ? (<ComponentToRender {...this.props} />) :
            (<Redirect
              to={{
                pathname: '/login',
                state: {from: this.props.location
                }}}
            />))}
      />)

      return (RouteToRender)
  }
}

因此，我可能会继承道具这一事实。所以这就是使用这个组件的调用：

class ProtectedRoute extends Component {
  render() {
    console.log(`ProtectedRoute: isAuthenticated: ${this.props.isAuthenticated}`)
    const ComponentToRender = this.props.component,
    RouteToRender = (
      <Route
        render={() =>
          (<Redirect
            to={{
              pathname: '/login'
              }}
           />)}
      />)

      return (RouteToRender)
  }

所以我收到的东西太过传入......（组件和路径）

THE FIX ：

<ProtectedRoute component={DashboardContainer} path='/dashboard' />

实际上它并没有完全修复它，但至少它不会渲染组件if！isAuthenticated。但是现在我的上一次更改引起了另一个问题，如果isAuthenticated是真的，那么它可能不会渲染，因为我从它中删除了{... this.props}后不再有路径

Answer 1

您要将组件和渲染作为道具发送到路径组件。由于组件prop可用，Route会呈现该组件而不是触发渲染。