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

时间:2017-11-08 02:49:55

标签: javascript html css reactjs inline

我有一个样式obj

int a[3] = { 1, 2, 3 };
int* p = &a[1];  // Make p point to the second element

std::cout << p[-1];  // Prints the first element of a, equal to *(p - 1)
std::cout << p[ 0];  // Prints the second element of a, equal to *p
std::cout << p[ 1];  // Prints the third element of a, equal to *(p + 1)

我想渲染一些具有各自颜色的div对象

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

循环遍历数组,为样式添加边框颜色会给我一个错误

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
  }

1 个答案:

答案 0 :(得分:0)

你可以这样试试。

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