字符串轉換爲JSON對象在React.js風格標籤使用風格= {}

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」。

不過，我想能夠做這樣的事情：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對象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) 
 
)

Answer 2

如果是有幫助的樣式屬性需要一個對象如{「顏色」：「藍色」}

我做了一個演示用你的代碼唯一讓我感到遺憾的是如何使用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

你可以看看到陣營文檔中的下一個環節

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