在 React 样式属性中使用 props

（我使用的是带有 ES6 语法的 JSX）

这有效：

render() {
  return (
    <div style={{ width: '95%' }}></div>
  )
}

这行不通：（为什么不行？）编辑：它确实有效

render() {
  return (
    <div style={{ width: this.props.progress + '%' }}></div>
  )
}

Edit:

它可以工作，但样式值必须是有效值，否则它将返回错误。

我使用状态来创建样式对象，并在构造函数中使用正则表达式清除属性，这样就不会因为无效值而再次出错。这是我的解决方案：

import React, { Component, PropTypes } from 'react'

export default class ProgressBar extends Component {
  constructor(props) {
    super(props)
    let progress = +props.progress.replace(/[^0-9]/g, '') || 50
    this.state = {
      style: {
        width: progress + '%'
      }
    }
  }

  render() {
    return (
    ...
      <div className="progress-bar" role="progressbar" aria-valuenow={ this.state.progress } style={ this.state.style }></div>
    ...
    )
  }
}
ProgressBar.propTypes = {
  progress: PropTypes.string.isRequired
}

最有可能的this.props.progess未设置为适当的值。为这种情况提供一个好的默认值：

render() {

  const { progress = 0 } = this.props;

  return (
    <div style={{ width: progress + '%' }}></div>
  )
}