内联样式反应组件的可变样式对象

Question

我有一个样式对象

let styles = {
  step_div:{
    height:'150px',
  } 
}

我想渲染一些 div 个对象，每个对象都有自己的颜色

class Layout extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      steps_array:[
        {title:'Intro',
          types:['Gate Keeper', 'Target Prospect'],
          color:'blue'},
        {title:'Grab Attention',
          types:['Name Drop', 'Product Value'],
          color:'yellow'},
        {title:'Disqualify Statement',
          types:[],
          color:'yellow'}]

遍历数组，向样式添加边框颜色时出错

  make_structure(){
    let rows = []
    let data = this.state.steps_array
    data.forEach((i, key)=>{
      let style = styles.step_div
      style.border="1px solid "+i.color //each items color property
      let row = (
        <Row>
          <div  style={style}>
            {i.title}
          </div>
        </Row>
      )
      rows.push(row)
    })
    return rows
  }

错误

TypeError: Cannot assign to read only property 'border' of object '#<Object>'

Answer 1

你可以这样试试

let style = {...styles.step_div,border:'1px solid'+i.color};

内联样式反应组件的可变样式对象

mutable styles object for inline-style react components

html

javascript

css

inline

reactjs