(React Native) 显示数组中项目的卡片列表
(React Native) Displaying a list of cards for items in an array
我有两个数组,比方说
单词和定义
export default class Dictionary extends React.Component {
constructor(props) {
super(props);
this.state = {
word: [],
definition:[],
index: 0
};
}
我有道具
<Card word = {w} definition = {d}/>
我想为数组中的每个 word/definition 对显示这些卡片的列表。如果有 5 words/definitions,那么我希望其中 5 张卡片显示在 ScrollableView 中。我怎样才能做到这一点?谢谢!
您可以在 Array.prototype.map
函数的回调中使用 Array.prototype.map
function.The 第二个参数是索引。您可以使用该索引来显示相应的 definition
项,如下所示
export default class Dictionary extends React.Component {
constructor(props) {
super(props);
this.state = {
word: ["a","b","c"],
definition:["a","b","c"],
index: 0
};
render() {
<div>
{this.state.word.map((w,i) => {
return <Card word = {w} definition = {this.state.definition[i]}/>
})}
</div>
}
}
在您所在的州,您可以将单词和定义合并为一件事,例如:
dictionary: [
{
index: 0,
word: 'Car',
definition: 'Definition of car',
},
// More objects like the one above
]
然后编写一个函数来渲染这个对象数组,可能是这样的:
renderDictionary() {
return (this.state.dictionary.map(word => {
<Card key={word.index} word={word.word} definition={word.definition} />
}));
}
然后你只需调用函数:
export default class Dictionary extends React.Component {
constructor(props) {
super(props);
this.state = {
dictionary: [
{
index: 0,
word: 'Car',
definition: 'Definition of car',
},
// More objects like the one above.
],
};
}
renderDictionary() {
return (this.state.dictionary.map(word => {
<Card key={word.index} word={word.word} definition={word.definition} />
}));
}
render () {
return (
<View>
{this.renderDictionary()}
</View>
);
}
}
我有两个数组,比方说 单词和定义
export default class Dictionary extends React.Component {
constructor(props) {
super(props);
this.state = {
word: [],
definition:[],
index: 0
};
}
我有道具
<Card word = {w} definition = {d}/>
我想为数组中的每个 word/definition 对显示这些卡片的列表。如果有 5 words/definitions,那么我希望其中 5 张卡片显示在 ScrollableView 中。我怎样才能做到这一点?谢谢!
您可以在 Array.prototype.map
函数的回调中使用 Array.prototype.map
function.The 第二个参数是索引。您可以使用该索引来显示相应的 definition
项,如下所示
export default class Dictionary extends React.Component {
constructor(props) {
super(props);
this.state = {
word: ["a","b","c"],
definition:["a","b","c"],
index: 0
};
render() {
<div>
{this.state.word.map((w,i) => {
return <Card word = {w} definition = {this.state.definition[i]}/>
})}
</div>
}
}
在您所在的州,您可以将单词和定义合并为一件事,例如:
dictionary: [
{
index: 0,
word: 'Car',
definition: 'Definition of car',
},
// More objects like the one above
]
然后编写一个函数来渲染这个对象数组,可能是这样的:
renderDictionary() {
return (this.state.dictionary.map(word => {
<Card key={word.index} word={word.word} definition={word.definition} />
}));
}
然后你只需调用函数:
export default class Dictionary extends React.Component {
constructor(props) {
super(props);
this.state = {
dictionary: [
{
index: 0,
word: 'Car',
definition: 'Definition of car',
},
// More objects like the one above.
],
};
}
renderDictionary() {
return (this.state.dictionary.map(word => {
<Card key={word.index} word={word.word} definition={word.definition} />
}));
}
render () {
return (
<View>
{this.renderDictionary()}
</View>
);
}
}