(我使用带有ES6语法的JSX)
这有效:
render() {
return (
<div style={{ width: '95%' }}></div>
)
}
这不起作用:(为什么不呢?)编辑:它确实有效
render() {
return (
<div style={{ width: this.props.progress + '%' }}></div>
)
}
修改
它有效,但样式值必须是有效值,否则它将返回错误。
我使用state创建样式对象并使用构造函数中的正则表达式清除属性,因此由于值无效而不会再次出错。这是我的解决方案:
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
}
答案 0 :(得分:0)
很可能this.props.progess
未设置为适当的值。为这种情况提供一个很好的默认值:
render() {
const { progress = 0 } = this.props;
return (
<div style={{ width: progress + '%' }}></div>
)
}
答案 1 :(得分:0)
您的示例按预期工作。
class Example extends React.Component {
render(){
const style = {
width: this.props.progress + '%',
backgroundColor : 'red'
}
return <div style={style}>
Hello
</div>
}
}
React.render(<Example progress={10}/>, document.getElementById('container'));
Fiddle
。只要确保你不要忘记设置progress
prop与相应的值