错误尝试使用 React js 将样式数组设置为元素

Question

当尝试为元素分配样式时，我收到下一个错误。

Error: Objects are not valid as a React child (found: object with keys {border, padding, whiteSpace, textOverflow, overflow, position, float, height, width}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Gridnamic`.

我尝试使用 Object.assign，设置数组 inline style={{width: "45px"}} 并不起作用。

我的数组样式是：

var styles = {
columns: {
    border: "1px solid #ddd",
    padding: "5px",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    overflow:"hidden",
    position: "relative",
    float: "left", 
    height: "45px", 
    width: "200px"
},
columnSelect: {
    border: "1px solid #ddd",
    padding: "5px",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    overflow:"hidden",
    position: "relative",
    float: "left", 
    height: "45px", 
    width: "50px"
}

};

而我的渲染方法是：

    return  <div>
                <p>{this.state.selected.length} seleccionados</p>
                <div className="table-responsive">
                            <div style={styles.row}>
                                <div style={styles.rowContent}>
                                    <div style={styles.columnSelect}><input type="checkbox" onClick={this.selectElement.bind(this)} className="selectAll"/></div>
                                    {this.state.columns.map(column =>
                                        <div style={styles.columns} key={column.name}>{column.title}</div>
                                    )}
                                </div>
                            </div>
                            <div style={styles.row}>
                                <div style={styles.rowContent}>
                                    <div> style={styles.columnSelect}</div>
                                    {this.state.columns.map(column =>
                                        <div style={styles.columns} key={column.name}>
                                            <input placeholder="Buscar" className="form-control" ref={'filter-'+column.name} name={column.name} onChange={this.filter.bind(this)} />
                                        </div>
                                    )}
                                </div>
                            </div>
                    </div>
                <p>{this.state.rows.length} registros.</p>
            </div>;

感谢开发者。

Answer 1

1. 冷静

2. 问题在这里：<div> style={styles.columnSelect}</div>。可能是为了做<div style={styles.columnSelect}></div>。