Question

我正在构建一个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”。

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

总是感激任何帮助。必须有一个更简单的方法来做到这一点。谢谢。

Answer 1

将inline-style to对象样式`转换为React限制的两个步骤：

将字符串解析为JSON对象。
将此对象的密钥转换为驼峰大小写（z-index变为zIndex ..依此类推）

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

＆＃13;

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

＆＃13;

Answer 2

如果有用，则style属性需要像{“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

将字符串转换为JSON对象以在React.js样式标记样式= {}中使用

2 个答案: