javascript - 在react JS中渲染具有N个固定列的布局

Question

我正在尝试呈现一个包含固定数量列的表格。我在css中设置了宽度，在js代码中设置了固定的列数。应该呈现表格。我正在处理的问题如下: - 在表中渲染 N 个固定列的代码是如此丑陋，我认为应该有一种方法可以用干净的代码来做到这一点 - 我找不到将组件动态附加到元素子元素的函数。

_renderProducts(): ReactElement {
  var cols_no = 4;
  var cols = [];
  for (var col = row_index; col < 0 && col < this.state.products.length; col+=1) {
    cols.push(
      <LayoutColumn className={cx('XElement/column')} />
    );
  }
  for (var row_index = 0; row_index < this.state.products.length;row_index+=cols_no) {
    for (var col = 0; col < cols.length && col < this.state.products.length; col+=1) {
      cols[col].appendchild(  // THIS DOESN"T EXISTS
          <XCard
            product={this.state.products[col]} />
      )
    }
  }
  return (
    <Layout>
      {cols}
    </Layout>
);

}

我花了几个小时试图找到一种正确的方法来做到这一点，但没有成功。

Answer 1

在react中操作dom并不是一个好主意。

为了映射子组件，一般来说，您需要创建子组件，每个组件都呈现应用程序的一部分。这里经常使用映射函数来渲染当前组件的子组件。

您可以在这里找到更多示例:https://facebook.github.io/react/docs/tutorial.html

我认为你可以用类似的方式改变你的逻辑:

_renderProducts(): ReactElement {
    return <Layout>{ this.state.products.map(function(product, idx) {
        <LayoutColumn className={cx('XElement/column')} key={idx}>
            <XCard product={product} />
        </LayoutColumn>
    }) }</Layout>;
);

如果您想要一个如何拆分所有元素和拆分组件的示例，您可以检查此代码段

.col0, .col1, .col2, .col3, .col4, .col5 {
    width: 120px;
    text-align: left;
}

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script type='text/javascript' src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script type='text/javascript' src="https://fb.me/react-dom-0.14.0.js"></script>
<script type="application/javascript;version=1.7" language="JavaScript 1.7">
  //<![CDATA[
var Header = React.createClass({
	propTypes: {
    	title: React.PropTypes.string,
        className: React.PropTypes.string
    },
    render: function() {
    	var { title, className } = this.props;
    	return <th className={className}>{title}</th>;
    }
});

var ElementRow = React.createClass({
	propTypes: {
    	values: React.PropTypes.arrayOf(React.PropTypes.any)
    },
    render: function() {
    	var { values } = this.props;
        if (!values) {
        	return null;
        }
        return <tr>{ values.map(function(i, k) {
        	return <Element className={'col' + i} value={i} key={k} />;
        }) }</tr>;
    }
});

var Element = React.createClass({
	propTypes: {
    	value: React.PropTypes.any,
        className: React.PropTypes.string
    },
    render: function() {
    	var { value, className } = this.props || '';
        return <td className={className}>{value}</td>
    }
});

var Example = React.createClass({
	propTypes: {
    	columns: React.PropTypes.array,
        rows: React.PropTypes.arrayOf(React.PropTypes.array)
    },
    renderHeaders: function(columns) {
        if (!columns) {
	        return null;
        }
        return columns.map(function(i, k) {
            return <Header title={i} key={k} className={'col' + k} />;
        });
    },
    renderBody: function(rows) {
    	if (!rows) {
        	return null;
        }
        return <tbody>{ rows.map(function(i, k) {
        		return <ElementRow values={i} key={k} />;
        	}) }</tbody>;
    },
    render: function() {
    	var { columns, rows } = this.props;
        if (!columns) {
        	return null;
        }
        return <table><thead>
        	<tr>{this.renderHeaders(columns)}</tr>
            </thead>
            {this.renderBody(rows)}
        </table>;
    }
});

var table = {
	columns: ['column1', 'column2', 'column3', 'column4', 'column5'],
    rows: [
    	['row1 - 1', 'row1 - 2', 'row1 - 3', 'row1 - 4', 'row1 - 5'],
    	['row2 - 1', 'row2 - 2', 'row2 - 3', 'row2 - 4', 'row2 - 5'],
    	['row3 - 1', 'row3 - 2', 'row3 - 3', 'row3 - 4', 'row3 - 5']
    ]
};
 
ReactDOM.render(
	<Example {...table} />,
    document.getElementById('container')
);

//]] >
</script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>