Fehler versuchen, Stil-Array zu Element mit reagieren js

Question

Wenn versuchen, einen Stil zu Element zuweisen, empfange ich den nächsten Fehler.

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`. 

habe ich versucht, den Einsatz Object.assign, setzen Sie das Array inline style = {{width: "45px"}} und nicht funktioniert.

Mein Array Stil ist:

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" 
} 

};

Und meine Render-Methode ist:

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>; 

Dank Entwickler.

Answer 1

1. Schauer

2. Die Frage ist hier: <div> style={styles.columnSelect}</div>. Wahrscheinlich zu tun <div style={styles.columnSelect}></div>.