[英]Choose value relating to index in render function, React Native, ES6
I have a simple video view and all I want to do is assign the volume props to a number however it's an array of videos and each video has a different volume, so I created an array based on the index of videos now I need each video to have it's specific volume 我有一个简单的视频视图,我想要做的就是将音量道具分配给一个数字,但这是一个视频数组,每个视频都有不同的音量,所以我根据视频索引创建了一个数组,现在我需要每个视频具有特定的体积
var arr = [{vol: 1}, {vol: 3}, {vol: 8}] //3 items in render
this.state = {
volVid: arr
}
render() {
return this.props.otherUsers.map(others =>
<View key={others.infinite}>
<Video
volume={this.state.volVid}
>
</Video>
</View>
);
}
I would have put a function inside the volume props however it gave an error of expecting a number and instead receiving a function, so is there a way to reach into the array and pull the specific video volume? 我本来可以在音量道具中放置一个函数,但是它却给出了期望数字的错误,而不是接收了一个函数,所以有没有办法进入数组并提取特定的视频音量? Expo video component being used here. 这里使用的博览会视频组件。
I think what you're trying to do is to refer to your volVid
array through index prop on .map()
: 我认为您要尝试通过.map()
上的索引 prop引用您的volVid
数组:
render() {
return this.props.otherUsers.map((others, index) => {
<View key={others.infinite}>
<Video
volume={this.state.volVid[index].vol}
>
</Video>
</View>
});
}
Based on the code provided, you can just add the index to the passed callback function and use that. 根据提供的代码,您可以将索引添加到传递的回调函数中并使用它。 So: 所以:
render() {
return this.props.otherUsers.map((others, index) =>
<View key={others.infinite}>
<Video
volume={(this.state.volVid[index]) ? this.state.volVid[index].vol : 1}
>
</Video>
</View>
);
}
Added a ternary check just in case otherUsers.length > arr.length
添加了一个三元检查,以防otherUsers.length > arr.length
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.