[英]Convert string to JSON object for use in React.js style tag 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>
)
};
我正在遍历 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
永远感谢任何帮助。 必须有一种更简单的方法来做到这一点。 谢谢你。
将inline-style to
转换为受 React 限制的对象inline-style to
两个步骤:
将字符串解析为 JSON 对象。
将此对象的键转换为驼峰式大小写( 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(/-([az])/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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.