Question

如果你可以帮助我这个非常有帮助，因为我花了很多时间。

我已经有了几个小时，我正在映射它并返回列表项。问题是我想要突出显示/仅显示其他数组中的项目（hours2）。

这是我的代码块：

const hours = ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00"];

const hours2 = ["11:00", "12:00"];

const renderedHours = hours.map(item => (
  <li
    style={{
      backgroundColor: item === hours2.map(item => item) ? "yellow" : "pink"
    }}
    // above I would like to select only those items which are equal to items from second array, but that does not work.

    key={item}
    className="hoursListItem"
    onClick={e => {
      this.handleClick(e);
    }}
  >
    {item}
  </li>
));

提前谢谢！

Answer 1

只需使用indexOf搜索第二个数组中的值，如果找不到该元素，则返回索引或-1：

const renderedHours = hours.map(item =>
        <li 
            style={{'backgroundColor': hours2.indexOf(item) > -1 ? 'yellow' : 'pink'}}

            key={item} 
            className="hoursListItem"
            onClick={(e) => {this.handleClick(e)}}
        >
            {item}
        </li>)

此处hours2中的项目将为黄色背景，其他项目为粉红色。

Answer 2

您可以使用Javascript some method检查数组中是否存在元素：

int Foo (int a, int b) 
{
     return a + b;
}

Answer 3

您可以使用includes()方法检查当前item是否在array2内。

style={{'backgroundColor': hours2.includes(item) ? 'yellow' : 'pink'}}

如果您只想对background-color中找到的项目array2，则可以使用此项。

style={{'backgroundColor': hours2.includes(item) && 'yellow'}}

＆＃13;

const hours = [ '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
const hours2 = ['11:00', '12:00'];

const RenderedHours = () => hours.map(item =>  <li 
   style={{'backgroundColor': hours2.includes(item) ? 'yellow' : 'pink'}}
   key={item} 
   className="hoursListItem"
   onClick={(e) => {this.handleClick(e)}}>{item}
</li>)

ReactDOM.render(
  <RenderedHours  />,
  document.getElementById('root')
);

＆＃13;

<script src="https://unpkg.com/react@16.3.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js"></script>
<div id="root"></div>

＆＃13;

Answer 4

我会使用该类来执行此操作而不是使用内部样式：

className={`hoursListItem ${hours2.includes(item) ? 'true' : 'false' }`}

在React.js中映射数组时仅设置少量元素

4 个答案: