Javascript 如何在react中比较两个数组

如果线条的数组元素等于贴图索引，如何返回带有背景色的按钮？ 这仅适用于行=[0,1,2]

let lines=[0,6,9]
 return (
        <div>
            {new Array(9).fill(null).map((e, i) => {
                let color='green';
                if(lines[i] === i) {
                return (
                        <React.Fragment key={i}>
                        <button style={{backgroundColor:this.props.color}}>MyButton {i}<button/>
                        {(i+1) % props.width === 0 && <br />}
                       </React.Fragment>
                      )
                }

                return(

                    <React.Fragment key={i}>
                        <button>MyButton {i}<button/>
                        {(i+1) % props.width === 0 && <br />}
                    </React.Fragment>
                )
            })}
        </div>
    );

let line=[0,6,9]
返回(
{新数组（9）.fill（null）.map（（e，i）=>{
让颜色为绿色；
if（行[i]==i）{
返回(
我的按钮{i}
{（i+1）%props.width==0&&

)
}
返回(
我的按钮{i}
{（i+1）%props.width==0&&

)
})}
);

只需将条件从

if(lines[i] === i)

到

另外，您不需要再次重复相同的代码，您可以根据条件的结果添加样式，如下所示

let lines=[0,6,9]
   return (
    <div>
      {new Array(9).fill(null).map((e, i) => {
        let color = "green";
        let styles = {};
        if (lines.includes(i)) {
          styles = { backgroundColor: this.props.color };
        }
        return (
          <React.Fragment key={i}>
            <button type="button" styles={styles}>
              MyButton {i}
            </button>
            {(i + 1) % props.width === 0 && <br />}
          </React.Fragment>
        );
      })}
    </div>
  );

let line=[0,6,9]
返回(
{新数组（9）.fill（null）.map（（e，i）=>{
让color=“绿色”；
让样式={}；
如果（包括第（i）行）{
styles={backgroundColor:this.props.color}；
}
返回(
我的按钮{i}
{（i+1）%props.width==0&&

);
})}
);

而不是

if(lines[i] === i)

你可以这么做

if (lines.find(lineArrayItem => lineArrayItem === i))

这段代码只是试图找出我是否存在于lineArrayItem中。如果不是，则返回null，这样您就可以知道索引是否与数组中的任何行匹配

if (lines.find(lineArrayItem => lineArrayItem === i))