javascript - React Router 将 props 传递给 渲染的组件？

Question

我目前遇到的问题是，当我使用诸如“/courses/:id”之类的路由参数来定位路由时，我想使用通常来自“Courses”组件的 Prop 来渲染“Course”组件。

所以，我必须将这些 props 从 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):

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;

这是我的单个类(class)组件，这里的问题是，在/courses 路由中，类(class)组件被渲染为一个数组，其中 props 只是从 Courses 数组传递到我的类(class)组件。但是，当我单击单个类(class)组件中的链接时，我仍然必须使用通常从数组中获取的原始 Prop 来渲染该组件，因此我必须从中获取它们并将它们传递给我渲染的组件... 。我目前已经使用三元运算符来完成此操作，该运算符询问 Prop 的位置(来自类(class)或链接)，如果该 Prop 存在，则会渲染它。但也许有更好的方法吗？对我来说，这看起来更像是一个摆弄的解决方法，而不是一个好的设计实践:

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/)