Mit Requisiten in React style-Attribut

Question

(Ich verwende JSX mit ES6 Syntax)

Dies funktioniert:

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

Dies funktioniert nicht: (warum nicht?) Edit: Es tatsächlich funktioniert

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

Edit:

Es funktioniert, aber der Style-Wert muss ein gültiger Wert sein, andernfalls wird der Fehler zurückgegeben.

Ich verwende den Status, um das Stilobjekt zu erstellen und die Eigenschaft mit einem regulären Ausdruck im Konstruktor zu bereinigen, damit es aufgrund ungültiger Werte nicht erneut fehlerhaft wird. Hier ist meine Lösung:

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 
} 

Answer 1

Am wahrscheinlichsten this.props.progess ist nicht auf einen geeigneten Wert festgelegt. Geben Sie einen guten Standardwert für diesen Fall an:

Answer 2

Ihr Beispiel funktioniert wie erwartet.

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. Stellen Sie sicher, dass Sie nicht vergessen, progress Prop mit entsprechenden Wert zu setzen