React/JSX Arrow 函数，用于带有数组的 JSON 对象

Question

我有以下 JSON 对象

const slides = [
{
title: "Hello World",
bullets: [
"Allows us to ... write",
"Allows us to ... writez",
"Allows us to ... writezz",
],
slideIndex: 0,
},
{
title: "Hello Worldz",
bullets: [
"Allows us to ... write",
"Allows us to ... writez",
"Allows us to ... writezz",
],
slideIndex: 1,
},
];

现在我想使用以下组件Slide.js

import React from "react";
const Slide = slide => (
<div>
<h1> { slide.title } </h1>
<ul>
{ slide.bullets.map( bullet => <li> { bullet } </li>)}
</ul>
</div>
);
export default Slide;

在我的App.js内显示幻灯片变量的内容。

import React, { Component } from 'react';
import './App.css';
import Slide from "./components/Slide.js";
const slides = [ ... ];
class App extends Component {
render() {
return (
<div className="App">
<Slide slide={slides} />
</div>
);
}
}
export default App;

如何遍历项目符号数组？我已经尝试过slide.bullets[bullet].map(...(，但这不起作用。

Answer 1

const slides = [
{
title: "Hello World",
bullets: [
"Allows us to ... write",
"Allows us to ... writez",
"Allows us to ... writezz"
],
slideIndex: 0
},
{
title: "Hello Worldz",
bullets: [
"Allows us to ... write",
"Allows us to ... writez",
"Allows us to ... writezz"
],
slideIndex: 1
}
];
const Slide = props => {
return (
<div>
<h1>{props.slide.title}</h1>
<ul>{props.slide.bullets.map(bullet => <li> {bullet} </li>)}</ul>
</div>
);
};
class App extends React.Component {
render() {
return (
<div className="App">{slides.map(slide => <Slide slide={slide} />)}</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

您的组件将收到道具。您需要从道具对象获取slide。

const Slide = (props) => (
<div>
<h1> { props.slide.title } </h1>
<ul>
{ props.slide.bullets.map( bullet => <li> { bullet } </li>)}
</ul>
</div>
);

或使用解构，

const Slide = ({slide}) => (
<div>
<h1> { slide.title } </h1>
<ul>
{ slide.bullets.map( bullet => <li> { bullet } </li>)}
</ul>
</div>
);

导出默认幻灯片;

编辑：

此外，在您的应用程序.js中，您必须在幻灯片数组上映射，

class App extends React.Component {
render() {
return (
<div className="App">{slides.map(slide => <Slide slide={slide} />)}</div>
);
}
}