有没有一种方法可以使用react将这本词典列在前端(显示在浏览器中)

Question

所以我有一个字典，我想在其中列出前端或使其在浏览器中可见：

[
{
"userId": 1,
"id": 1,
"title": "quidem molestiae enim"
},
{
"userId": 1,
"id": 2,
"title": "sunt qui excepturi placeat culpa"
},
{
"userId": 1,
"id": 3,
"title": "omnis laborum odio"
}
]

有没有一种方法可以使用react来显示browswer本身中的值？

Answer 1

如果要在浏览器中显示数组，可以使用pre标记并将其中的文本设置为JSON.stringify(array, null, 4)。这将创建一个带有4个空格的JSON作为缩进

const array = [{userId:1,id:1,title:"quidem molestiae enim"},{userId:1,id:2,title:"sunt qui excepturi placeat culpa"},{userId:1,id:3,title:"omnis laborum odio"}];
function Example({ array }) {
return (
<pre>{JSON.stringify(array, null, 4)}</pre>
);
};
ReactDOM.render(
<Example array={array} />,
document.getElementById("react")
);

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

Answer 2

您可以将文件或api中的数据分配给状态，然后使用地图功能显示为列表

import React, { Component } from "react";


class Main extends React.Component {
componentDidMount = async () => {

const data = await fetch ("https://api.dictionary.data.com")
this.setState({dictionaryData:data})

};


constructor() {
super();
this.state = {
dictionaryData: []
};
}

render() {
return (
<div>
<div style = {styles.Container}  >

{this.state.dictionaryData.map(Item => {
return (
<div style = {Styles.Item} >
<p> {Item.title} </p>
</div>
)
}}

</div>
);
}
}

export default Main;

let styles = {
Item: {
borderStyle: "none",
backgroundColor: "white",
color: "magenta",
cursor: "pointer",
outlineColor: "cyan",
borderRadius: 50,

},
Container: {
position: "absolute",
top: '20%',
left: '20%',
width: '50%',
height: '80%',
display: 'flex',
flexDirection:'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
}
};