Javascript 读取列表中特定元素的数据

我有以下清单：

render() {
    return (
        <section className='display-question'>
            <div className='wrapper'>
                <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}/>
                                <Button onClick={this.clickHandler} style={{display: 'block', margin: 'auto'}}
                                        bsStyle="primary" id={question.id}>Rozwiaz to zadanie kurwo
                                </Button>
                            </li>
                        )
                    })}
                </ul>
            </div>
        </section>
    )
}

这是

Questions.js

文件：

import React from 'react';
import firebase from 'firebase';
import {Button} from 'react-bootstrap';

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

    componentDidMount() {
        const questionsRef = firebase.database().ref('Works');
        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
            });
        });
    }

    clickHandler() {
        console.log("e");
    }

    render() {
        return (
            <section className='display-question'>
                <div className='wrapper'>
                    <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}/>
                                    <Button onClick={this.clickHandler} style={{display: 'block', margin: 'auto'}}
                                            bsStyle="primary" id={question.id}>Rozwiaz to zadanie kurwo
                                    </Button>
                                </li>
                            )
                        })}
                    </ul>
                </div>
            </section>
        )
    }
}

export default Questions;

这是如何工作的：我从Firebase抓取列表，然后用h3、一些ps、img和一个按钮呈现一个列表

我想当按钮被点击时，用户将被带到一个不同的“屏幕”与更多的细节。但我不知道如何设置它

---

任何帮助都将不胜感激。我愿意接受其他建议。我曾考虑将其作为一个模式，但这似乎并不正确。

缺少的一点是，您没有使用任何路由库

最受欢迎的是

下面是一个基本示例（），它将帮助您理解这个想法并帮助您开始使用它：

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.path}/:topicId`} component={Topic}/>
    <Route exact path={match.path} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample

从“React”导入React
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
常量Home=（）=>(
家
)
const About=（）=>(
关于
)
常量主题=（{match}）=>(
{match.params.topicId}
)
常量主题=（{match}）=>(
话题


使用React进行渲染


组件


道具诉国家


(
请选择一个主题。
)}/>
)
常量基本示例=（）=>(

家
关于
话题


)
导出默认基本示例

我应该把

路由器作为自己的组件吗？我看不出这有什么好处。您可以开始在顶级组件中定义
组件，如果以后有任何理由将定义移动到它们自己的组件中，那么我建议您这样做。另外，我建议你开始播放/查看文档，这里有非常好的用例和示例：好的，这个路由器太棒了。这么容易实现！非常感谢。
import React from 'react';

export default class Question extends React.Component {
    constructor(p) {
        super(p);
    }

    render() {
        return (
            <React.Fragment>
                <img src="" alt=""/>
            </React.Fragment>
        )
    }
}

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.path}/:topicId`} component={Topic}/>
    <Route exact path={match.path} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample