将字符串转换为 JSON 对象以用于 React.js 样式标签 style={}

IT技术 javascript reactjs
2021-05-16 06:45:13

我正在构建一个 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>
  )
};

我正在遍历 rowData 列表以填充我的行，可以在此处找到：

{this.state.rowData.map(function(row, index) {
  return (
    <Row 
        id={row.id} 
        style={row.style} 
        onStyleChange={function(e) {this.onStyleChange(e, row.id)}.bind(this)}/>
          );
}.bind(this))}

然后在我的 onStyleChange 函数中，我有： 

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

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

但是，我希望能够执行以下操作：style={{props.style}}在我的 Row 组件中。但是因为它目前是一个字符串，所以它不起作用。我也试过style={JSON.parse(props.style)}每次添加新行时都会抛出错误，因为 props.style='{}'。错误读取Uncaught SyntaxError: Unexpected token f in JSON at position 1

永远感谢任何帮助。必须有一种更简单的方法来做到这一点。谢谢你。

2个回答

转换inline-style to受 React 限制的 object-style` 的两个步骤：

  1. 将字符串解析为 JSON 对象。

  2. 将此对象的键转换为驼峰式大小写（z-index变成zIndex.. 等等）

恭喜！我写了算法，请检查以下内容：

const example1= "position:absolute;h-index:9001;"
const example2 = "-ms-transform: rotate(20deg);-webkit-transform: rotate(20deg);";
// 2ⁿᵈ step logic
const camelize = (string) =>  string.replace(/-([a-z])/gi,(s, group) =>  group.toUpperCase());

// 1ˢᵗ step logic which calls the 2ⁿᵈ step logic
const style2object = (style) => style.split(';').filter(s => s.length)
        .reduce((a, b) => {
           const keyValue = b.split(':');
           a[camelize(keyValue[0])] = keyValue[1] ; 
           return a;
         } ,{});


console.log("Example 1 : ", example1, '\n',
  style2object(example1)
)

console.log("Example 2 : ", example2, '\n',
  style2object(example2)
)

如果有帮助，样式属性需要一个像 {"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'));

http://codepen.io/GGarciaSeco/pen/vgVEGX?editors=0010

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

https://facebook.github.io/react/docs/dom-elements.html#style

其它你可能感兴趣的问题
上一篇如何在 Material ui 中更改较小屏幕的布局？ 下一篇如何在handlechange中获取表单值？