Question

到目前为止，我正在使用Express，我正在做这样的事情：

<a href="link/:id"/>
router.get('/link/:id', (req, res, next) => {
    query(id)
        .then(queryResponse => res.render('view', {queryRes: queryResponse}))
        // ^^^ Passing the returned object into the view
});

现在我正在与React合作，而我正在尝试做同样的事情。到目前为止，我有这个：

<Link to={`question${question.id}`} style={{display: 'block', margin: 'auto'}}
      id={question.id}>Rozwiaz to zadanie kurwo
</Link>

这会更改浏览器中的网址。但是我怎样才能再次查询Firebase，或者因为我还有所有数据，只需将其传递给另一个＆＃34;查看＆＃34; / component（不知道如何现在调用它）。

这是我的完整组件，列出了所有元素

class Questions extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentItem: '',
            username: '',
            questions: []
        };
    }

    componentDidMount() {
        const questionsRef = firebase.database().ref('Works').orderByChild('available').equalTo(true).limitToFirst(10);
        questionsRef.on('value', (snapshot) => {
            let questions = snapshot.val();
            let newState = [];
            for (let question in questions) {
                newState.push({
                    id: question,
                    category: questions[question].category,
                    level: questions[question].level,
                    pointAmount: questions[question].pointAmount,
                    photoURL: questions[question].photoURL,
                });
            }
            this.setState({
                questions: newState
            });
        });
    }

    render() {
        return (
            <section className='display-question'>
                <div className='wrapper'>
                    <Router>
                        <ul style={{listStyleType: 'none'}}>
                            {/*kategoria, poziom (liceum itd), pkty, zdjecie*/}
                            {this.state.questions.map((question) => {
                                return (
                                    <li key={question.id}>
                                        <h3>Kategoria: {question.category}</h3>
                                        <p>Poziom: {question.level}</p>
                                        <p>Punkty: {question.pointAmount}</p>
                                        <img alt='' style={{width: '20%'}} src={question.photoURL}/>
                                        <Link to={`question${question.id}`} style={{display: 'block', margin: 'auto'}}
                                              bsStyle="primary" id={question.id}>Rozwiaz to zadanie kurwo
                                        </Link>
                                    </li>
                                )
                            })}
                        </ul>
                    </Router>
                </div>
            </section>
        )
    }
}

所以我想要传递id，在新组件中查询，或传递整个对象（首选），但不知道如何操作。

编辑。

到目前为止，我有这个：

<Router>
    <Link to={`questions/:${question.id}`} component={question}
          style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie kurwo
    </Link>
</Router>
<Route path="questions/:id" component={question}/>

我得到的错误是：

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

Answer 1

如果您在<Route path="questions/:id" component={QuestionComponent}>内声明Router，则可以在:id的{{1}}中检索QuestionComponent，然后查询问题＆＃39} ; this.props.match.params.id内的数据。

使用反应路由器将对象传递给新组件

1 个答案: