Question

我目前遇到的问题是，当我使用诸如“ / courses /：id”之类的路线参数作为路线目标时，我想使用通常来自“ Courses”组件的道具来渲染“ Course”组件。 / p>

因此，我必须将这些道具从Courses传递给Course组件，但是如果我的Course组件是由React中的组件动态呈现的，该怎么办？

class App extends Component {
  render () {
    return (
      <BrowserRouter>
        <div className="App">
          <Link to={`/users`}>Users link</Link>
          <a href="/courses">Courses link</a>
          <Switch>
            <Route path="/" exact render={() => (<h1>Hello World!</h1>)} />
            <Route path="/users" component={Users} />            
            <Route path="/courses/:id" exact component={Course} />
            <Route path="/courses" component={Courses} />
          </Switch>
        </div>
      </BrowserRouter>      
    );
  }
}

导出默认应用；

我的课程：

class Courses extends Component {
    state = {
        courses: [
            { id: 1, title: 'Angular - The Complete Guide' },
            { id: 2, title: 'Vue - The Complete Guide' },
            { id: 3, title: 'PWA - The Complete Guide' }
        ]
    }

    render () {
        return (
            <div>
                <h1>Amazing Udemy Courses</h1>
                <section className="Courses">
                    {
                        this.state.courses.map( course => {
                            return (
                            <Link 
                                to={{
                                    pathname:`/courses/${course.id}`,
                                    state: {
                                        title: course.title
                                    }
                                }}
                                key={course.id}
                            >
                                <article className="Course" >
                                <Course 
                                    id={course.id}
                                    title={course.title}
                                />
                                </article>
                            </Link>
                            )
                        } )
                    }
                </section>
            </div>
        );
    }
}

export default Courses;

这是我的单个Course组件，这里的问题是，在/ courses路由中，Course组件被呈现为一个数组，其中道具只是从Courses数组传递到我的Course组件。但是，当我从单个“课程”组件中单击“链接”时，我仍然必须使用通常从数组中获取的原始道具来渲染该组件，因此我必须从中抓取它们并将它们传递给渲染的组件，方法是... 。我目前使用三元运算符来完成此操作，该运算符询问道具的位置（来自“课程”或“链接”），如果该道具存在，则将其渲染。但是，也许有更好的方法吗？对于我来说，这看起来像是一个繁琐的解决方法，而不是一种好的设计实践：

class Course extends Component {

    render () {
        return (
            <div>
                {console.log("Props: ", this.props)}
                <h1>{this.props.title? this.props.title: this.props.location.state.title}</h1>
                <p>You selected the Course with ID: 
                {this.props.id ? this.props.id: this.props.match.params.id}</p>
            </div>
        );
    }
}

export default Course;

Answer 1

我将把Courses类的状态移动到App类，并将其作为属性传递给Courses。您也可以将此数组传递给Course，以便您可以访问它。

要将属性传递给路由器渲染的组件，请使用不同的语法。代替：

<Route path="/courses" component={Courses} />

使用：

<Route path="/courses" render={(props)=><Courses {...props} courses = {this.state.courses}/>} />

（基于：https://tylermcginnis.com/react-router-pass-props-to-components/）

React Router将道具传递给<Link />渲染的组件？

1 个答案: