返回的嵌套divs

Question

我正在尝试返回与此类似的结构

<div style="someCSS">
  <div style="someOtherCSS"></div>
  <div style="someOtherCSS"></div>
</div>
<div style="someCSS">
  <div style="someOtherCSS"></div>
  <div style="someOtherCSS"></div>
  <div style="someOtherCSS"></div>
</div>

，但我正在围绕这个想法工作，但这不是很正确，我不知道该怎么办。

const nestedDivs = () => {
    for (let i = 0; i <= x; i++) {
      for (let j = 0; j <= y; j++) {
         let someOtherCSS{
          borderColor: '#fff',
          borderSize: '1px',
          borderStyle: 'solid',
          background: '#ffcc00',
         };
      fooStyle.push(<div style={someOtherCSS}></div>);
      }
       let someCSS{
          borderColor: '#fff',
          borderSize: '1px',
          borderStyle: 'solid',
          background: '#ff0000',
         };
      fooStyle.unshift(<div style={someCSS}></div>);
    }
    return fooStyle;
}

Answer 1

如果您的代码正常执行，并且只是在附加某些hothercss 中遇到问题，则将其分为 somecss ，那么您可以尝试一下，

const nestedDivs = () => {
    for (let i = 0; i <= x; i++) {
        const innerDives = [];
        for (let j = 0; j <= y; j++) {
            let someOtherCSS{
                borderColor: '#fff',
                borderSize: '1px',
                borderStyle: 'solid',
                background: '#ffcc00',
            }
            innerDives.push(<div style={someOtherCSS}></div>);
        }
        let someCSS{
            borderColor: '#fff',
            borderSize: '1px',
            borderStyle: 'solid',
            background: '#ff0000',
        }
        fooStyle.push(<div style={someCSS}>{innerDives}</div>);
    }
    return fooStyle;
}

希望这对您有帮助！快乐的编码...

Answer 2

您还可以尝试下面的尝试，它使用文本进行contet html，然后使用dangernlysetinnerhtml进行html。

import React from 'react';
import './App.css';

function App() {
  let someHtml = ``;
  let x = 5;
  let y = 10;
  for (let i = 0; i <= x; i++) {
    someHtml += `<div className='someCSS'>`
    for (let j = 0; j <= y; j++) {
      someHtml += `<div className='someOtherCSS'></div>`;
    }
    someHtml += '</div>'
  }


  return (
    <div className="App" dangerouslySetInnerHTML={{__html: someHtml}} />
  );
}

export default App;