问题描述
在我的React组件的.map()函数中,我有一个if语句,我需要包含多个由||分隔的条件
操作员。
问题是, this.state.insights
是一个数组,该数组由不同长度组成,具体取决于从服务器提取的json数据。
document.getElementById("adMaskid" + this.props.id).innerHTML = audio_data
.map((sample, i) => {
let rectOpacity = 1
if (i > this.state.insights[0].start && i < this.state.insights[0].end || /
i > this.state.insights[1].start && i < this.state.insights[1].end) {
rectOpacity = 1;
} else {
rectOpacity = 0;
};
let sampleWidth = 100.0 / audio_data.length;
let sampleHeight = sample * 50.0;
return `<rect style="transform: scaleY(.9); opacity: ${rectOpacity};"
x=${sampleWidth * i}
y=${(25 - sampleHeight)}
width=${sampleWidth}
height=${sampleHeight} />`
)}
我完全不知道如何克服这个障碍。
例如,如果this.state.insights
数组由3个值组成,那么我将如何动态创建if语句以反映如下内容:
if (i > this.state.insights[0].start && i < this.state.insights[0].end || /
i > this.state.insights[1].start && i < this.state.insights[1].end ||
i > this.state.insights[2].start && i < this.state.insights[2].end ||)
无需更改我的基础代码,有没有办法做到这一点? 我已经读过有关使用eval语句的信息,但这样做使我倾向于希望有一个更好,更安全的解决方案。 非常感谢您的见解。 非常感谢。
1楼
Jonas Wilms
2
已采纳
2019-03-02 22:12:06
this.state.insights.some(({ start, end }) => i > start && i < end )
只需迭代insights
数组,根本不需要eval
。