Question

在将道具重新传递给儿童时（特别是在Route内），我感到很困惑。例如：

class App extends Component {
    constructor(props) {
        this.sayHi = this.sayHi.bind(this);
    }

    sayHi() {
        console.log('hi')
    }

    render() {
        return (
          <Router>
            <Route path="/projects" component={(props, state, params) => 
              <ProjectList 
                sayHi={this.sayHi}
              {...props} />} 
            />
          </Router>
        )
    }
}

const ProjectList = (props) => {
    return (
        <Route path={`${props.match.url}/:id`} component={(props, state, params) => 
          <ProjectDetail 
            sayHi={props.sayHi}
          {...props} />} 
        />
    )
}

const ProjectDetail = (props) => {
    console.log(props)
}

在ProjectList组件中，访问sayHi方法没有问题（我可以将其附加到此组件中的onClick事件），但在ProjectDetail中组件，我得到props.sayHi的未定义。

我怎么错误地传递了这个道具？

Answer 1

您只是同名参数的问题。在ProjectList组件中：

<Route path={`${props.match.url}/:id`} component={(props, state, params) => 
    <ProjectDetail 
         sayHi={props.sayHi}
    {...props} />} 
/>

当您创建ProjectDetail元素并传递sayHi道具时，您必须访问 ProjectList的道具，而不是道具箭头函数（道具Route passes）。参数是＆＃34;覆盖＆＃34;彼此因为它们名称相同，props。所以，试试：

const ProjectList = (props) => {
    return (
        <Route path={`${props.match.url}/:id`} component={(routeProps, state, params) => // use name "routeProps" instead of "props"
            <ProjectDetail 
                sayHi={props.sayHi}
            {...props} />} 
        />
    )
}

我们将props道具箭头功能中的component重命名为routeProps，这将消除名称冲突。这样，ProjectList的道具就传递给ProjectDetail，而不是Route传递的道具。

当我使用路线时，为什么我的道具未定义？

1 个答案: