Javascript 将字符串转换为JSON对象，以便在React.js style标记style={}中使用

我正在构建一个React.js应用程序，允许用户在文本区域中输入样式，这将影响另一个元素的样式

首先，我有一个行组件，如下所示：

function Row(props) {
  return (
    <tr>
      <td width="50%">
        <textarea 
          style={{}} 
          value={props.style}
          onChange={props.onStyleChange}>
        </textarea>
      </td>
      <td><div className="">Row {props.id+1}</div></td>
    </tr>
  )
}; 

因此，当用户将数据输入textarea时，它将添加到rowData数组中的第i个元素。假设是第0行，用户在文本区域中输入“Hello”，然后输入rowData[0]。style=“Hello”

但是，我希望能够这样做：

style={{{props.style}}

在我的行组件中。但由于它当前是一个字符串，因此无法工作。我还尝试了

style={JSON.parse（props.style）}

，每次我添加新行时都会抛出一个错误，因为props.style='{}'。错误读取

uncaughtsyntaxerror:JSON中位置1处的意外标记f

---

总是感激任何帮助。一定有更简单的方法。谢谢。

将

内联样式转换为
对象样式`的两个步骤受React限制：

将字符串解析为JSON对象

将此对象的键转换为驼峰大小写（
z-index
变为
zIndex
。依此类推）

恭喜你！我编写了算法，检查如下：


const example1=“位置：绝对；h指数：9001；”
const example2=“-ms变换：旋转（20度）；-webkit变换：旋转（20度）；”；
// 2ⁿᵈ 阶跃逻辑
constcamelize=（string）=>string.replace（/-（[a-z]）/gi，（s，group）=>group.toUpperCase（））；
// 1ˢᵗ 调用2的步骤逻辑ⁿᵈ 阶跃逻辑
常量style2object=（style）=>style.split（“；”）.filter（s=>s.length）
.减少（（a，b）=>{
const keyValue=b.split（“：”）；
a[camelize（keyValue[0]）]=keyValue[1]；
返回a；
} ,{});
log（“示例1:”，示例1，“\n”，
样式2对象（示例1）
)
log（“示例2:”，示例2，“\n”，
样式2对象（示例2）
)
如果样式属性有帮助，它需要像{“color”：“blue”这样的对象

我用你的代码做了一个演示。我唯一想做的就是如何使用onChange事件进行更新

function Row(props) {
  const styleValue = JSON.stringify(props.style);
  return (
    <tr>
      <td width="50%">
        <textarea 
          style={props.style} 
          defaultValue={styleValue}
          onChange={props.onStyleChange}/>

      </td>
      <td><div className="">Row {props.id+1}</div></td>
    </tr>
  )
};

class App extends React.Component {
  state = {
    rowData: [{
      id: 1,
      style: {
        color: 'blue'
      }
    }, {
      id: 2,
      style: {
        color: 'red',
        backgroundColor:'#000'
      }
    }]
  };

  onStyleChange(e, id) {
    const rows = this.state.rowData;
    const row = rows.find(row => row.id  === id);
    const index = rows.indexOf(row);
    rows[index]['style'] = JSON.parse(e.target.value);
    this.setState({
      rowData: rows
    });
  }
  render() {
    return (
      <table>
         <tbody>
      {
      this.state.rowData.map(function(row, index) {
        return (
          <Row 
        id={row.id} 
        key={index}
        style={row.style} 
        onStyleChange={function(e) {this.onStyleChange(e, row.id)}.bind(this)}/>
        );
      }.bind(this))

    }
          </tbody>
    </table>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

功能行（道具）{
const styleValue=JSON.stringify（props.style）；
返回(
行{props.id+1}
)
};
类应用程序扩展了React.Component{
状态={
行数据：[{
id:1，
风格：{
颜色：“蓝色”
}
}, {
id:2，
风格：{
颜色：“红色”，
背景颜色：“#000”
}
}]
};
onStyleChange（e，id）{
const rows=this.state.rowData；
const row=rows.find（row=>row.id==id）；
const index=行。indexOf（行）；
行[index]['style']=JSON.parse（e.target.value）；
这是我的国家({
行数据：行
});
}
render（）{
返回(
{
this.state.rowData.map（函数（行，索引）{
返回(
);
}.绑定（本）
}
)
}
}
ReactDOM.render(

您可以在下一个链接中查看React文档


onStyleChange: function(e, id) {
  this.state.rowData[id].style = e.target.value;
  this.setState(this.state);
}

function Row(props) {
  const styleValue = JSON.stringify(props.style);
  return (
    <tr>
      <td width="50%">
        <textarea 
          style={props.style} 
          defaultValue={styleValue}
          onChange={props.onStyleChange}/>

      </td>
      <td><div className="">Row {props.id+1}</div></td>
    </tr>
  )
};

class App extends React.Component {
  state = {
    rowData: [{
      id: 1,
      style: {
        color: 'blue'
      }
    }, {
      id: 2,
      style: {
        color: 'red',
        backgroundColor:'#000'
      }
    }]
  };

  onStyleChange(e, id) {
    const rows = this.state.rowData;
    const row = rows.find(row => row.id  === id);
    const index = rows.indexOf(row);
    rows[index]['style'] = JSON.parse(e.target.value);
    this.setState({
      rowData: rows
    });
  }
  render() {
    return (
      <table>
         <tbody>
      {
      this.state.rowData.map(function(row, index) {
        return (
          <Row 
        id={row.id} 
        key={index}
        style={row.style} 
        onStyleChange={function(e) {this.onStyleChange(e, row.id)}.bind(this)}/>
        );
      }.bind(this))

    }
          </tbody>
    </table>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));