javascript - 如何在反应中将给定数量的列作为div元素附加到另一个div元素上

问题描述

我目前正在尝试使用 jQuery 中以前非常简单的原理在 React 中呈现一种带有 div 元素的网格。

使用 jQuery，像这样快速简单：

const $field = $('#field');

for(let row = 0; row < 5; row++) {
const $row = $('<div>').addClass('row');
  for(let col = 0; col < 10; col++) {
    const $col = $('div').addClass('col');
    $row.append($col);
  }
$field.apped($row);
}

完毕

在 React 我现在已经尝试了几种方法，但没有成功

首先是真正的基础：

    const rows = [], cols = [];
      for(let x = 0; x < 6; x++) {
      let row = React.createElement(
        "div", {className: "row"}
      );
      rows.push(row);
  }   
  for(let i = 0; i < 7; i++) {
      let col = React.createElement(
        "div", {className: "col"}
      );
      cols.push(col);
  }   

  class Grid extends React.Component {
      constructor(props) {
        super(props);
      };
    
      render() {
        
            return (
                <>
                    <h1>Some Header</h1>
                    <div id="board">
                        {rows}
                        {cols}
                    </div>
                </>
            )
        }  
 }

当然，这里的问题是 cols 不与行嵌套

由于不幸的是 React 中不存在 innerHTML 函数——我理解存在安全问题的提示——我首先尝试使用方法将元素与状态嵌套。没有成功，坦率地说，在我看来，如此努力地做如此简单的事情（甚至使用 vanilla JS）似乎是倒退了一步。

我仍然相信这样的事情必须要简单得多——即使在 React 中也是如此。所以尝试了这样的事情：

... 

class Grid extends React.Component {
    constructor(props) {
        super(props);
    };
    
    render() {
        
            return (
                <>
                    <h1>Some Header</h1>
                    <div id="board">
                        {rows.map((el, i) => {
                            return <div className="row" dangerouslySetInnerHTML={{__html: cols.forEach(el => {return el}) }} />;
                        })}
                    </div>
                </>
            )
        }  
}

不幸的是，没有成功，只有行 div 被渲染。不幸的是，下一次尝试也不是，而是更接近：

... 
class Grid extends React.Component {
    constructor(props) {
        super(props);
    };
    
    render() {
        
            return (
                <>
                    <h1>Some Header</h1>
                    <div id="board">
                        {rows.map((el, i) => {
                            return <div dangerouslySetInnerHTML={{__html: cols}} />;
                        })}
                    </div>
                </>
            )
        }
    
}

输出：

<div id="field">
  <div>
    [object Object],[object Object],[object Object],[object Object],[object Object],[object Object], 
 [object Object]
  </div>
  <div> ... etc

使用该映射函数中的“i”-索引迭代器来遍历 Object.keys 或 Object.values 并带有一些额外的逻辑也不起作用，现在我已经没有想法了，也找不到任何合适的提示片刻。

有谁知道这样做的最终解决方案？

非常感谢

标签： javascriptjqueryreactjs

... for(let i = 0; i < 7; i++) { let col = "<div class='col'></div>"; cols.push(col); } class Grid extends React.Component { constructor(props) { super(props); }; render() { return ( <> <h1>Some header</h1> <div id="board"> {rows.map((el, i) => { return <div className="row" dangerouslySetInnerHTML={{__html: cols.join(" ")}} />; })} </div> </> ) } ...

javascript - 如何在反应中将给定数量的列作为div元素附加到另一个div元素上

问题描述

解决方案

推荐阅读