Javascript 在react中创建一个列表组件，并将每个列表项设置为一个切换项，以便单击下面的图片

我很难弄清楚我应该在哪里迭代，在哪里应该有切换的逻辑。我有一个App.js来保存所有内容，一个listitem组件文件，我想在其中构建我的列表项，在切换中，我创建了一个状态函数，目前正在尝试迭代。我还对如何获取json数据感到困惑。我放弃了从外部获取它并将其加载到本地文件的尝试。如何访问正确的值并将其放入列表中

我现在有这个，我可以显示一个电台的名称和频道。 及

链接，因为我不能发布图片

--

--index.css文件

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.card-trip {
  overflow: hidden;
  background: #2F2F39;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  width: 250px;
  height: 400px;
  border-radius: 30px;
  color: #797D8D;
}

.card-trip > img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.card-trip h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-trip p {
  font-size: 12px;
  opacity: .7;
  margin: 0;
}


.card-trip .card-trip-infos {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.card-trip-infos .card-trip-user {
  position: absolute;
  right: 16px;
  top: -20px;
  width: 40px;
}
.card-trip-header {
  height: 50px;
  background-color: #ECAD60;

}

#header {
  margin-top: 0;
  padding-top: 5px;
}

#frequency {
  text-align: right;
}

#radioName {
  text-align: left;
}

body {
  margin-top: 50px;
  margin-left: 50px;
  list-style: none;
  justify-content: center;
  align-items: center;
}

li {
  list-style: none;
  border: 5px;
}

如上所述，我希望使用json数据创建一个列表组件，并使每个项目都可以单击以显示由json中的url提供的图片

---

谢谢

您应该在主组件中导入JSON数据，并映射每个结果。您应该将每个循环的数据传递到容器，并在那里使用它。然后可以编写一个onclick事件来显示图像。看看这个。在我看来，您是新手，因此我建议您学习挂钩而不是类。

您应该在主组件中导入JSON数据，并映射每个结果。您应该将每个循环的数据传递到容器，并在那里使用它。然后可以编写一个onclick事件来显示图像。看看这个。在我看来，您是新手，因此我建议您学习挂钩而不是类。

将代码粘贴到此处，请不要在不需要图像时使用它们。@Kobe已修复，对此表示抱歉。不用担心，我现在就来看看。您介意共享css吗？我会写一个repl.it，这样你就可以运行code@Kobe添加它！将代码粘贴到这里，当不需要图像时，请不要使用它们。@Kobe已修复，对此表示抱歉。不用担心，我现在就看一看。您介意共享css吗？我会写一个repl.it，这样你就可以运行code@Kobe添加它！非常新的反应，谢谢你的回答和时间！你说的容器是指app.js吗？我指的是Station.js:）非常新的反应，谢谢你的回答和你花的时间！这里的容器是指app.js吗？我是指Station.js:）

import React, { Component } from 'react'
import ListItem from './lists/ListItem'
import PostData from './data/postData.json'
import { directive } from '@babel/types';

export default class Toggle extends Component {
  state = {
    on: false,
  }
  toggle = () => {
      this.setState({
      on: !this.state.on
    })
  }
  // render() {
  //   return (
  //     <ul>
  //        {PostData.radios.map((postDetail, index) => {
  //           return <ListItem/>
  //        })}
  //     </ul>
  //    )
  // }

  render() {
    return (
      <ul>
          <div>
                <ListItem/>
          </div>        
      </ul>
    )
  }
}

import React, { Component } from 'react'
import PostData from '../data/postData.json'
import ReactDOM from "react-dom";


export default class ListItem extends Component {
    state = {
        on: false,
      }
      toggle = () => {
          this.setState({
          on: !this.state.on
        })
      }

    render () {
        return (
           <li>
               <div>{PostData.radios[0].name} {PostData.radios[0].frequency}</div>
           </li>
        )
    }

};

{

    "radios": [
        {
            "name": "Radio 1",
            "frequency": 99.23,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        },
        {
            "name": "Radio 2",
            "frequency": 88.13,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        },
        {
            "name": "Radio 3",
            "frequency": 89.99,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        },
        {
            "name": "Radio 4",
            "frequency": 93.23,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        }
    ]

}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.card-trip {
  overflow: hidden;
  background: #2F2F39;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  width: 250px;
  height: 400px;
  border-radius: 30px;
  color: #797D8D;
}

.card-trip > img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.card-trip h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-trip p {
  font-size: 12px;
  opacity: .7;
  margin: 0;
}


.card-trip .card-trip-infos {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.card-trip-infos .card-trip-user {
  position: absolute;
  right: 16px;
  top: -20px;
  width: 40px;
}
.card-trip-header {
  height: 50px;
  background-color: #ECAD60;

}

#header {
  margin-top: 0;
  padding-top: 5px;
}

#frequency {
  text-align: right;
}

#radioName {
  text-align: left;
}

body {
  margin-top: 50px;
  margin-left: 50px;
  list-style: none;
  justify-content: center;
  align-items: center;
}

li {
  list-style: none;
  border: 5px;
}