Parmeter feste Werte: this.props.
This.props.local_constant
Lokale Variablen werden mit this.props.Varible übergeben.
Im Beispiel wird im ReactDOM.render eine Komponente: HelloMessage eingebunden.
Die Komponente verwendet dann zur Laufzeit Werte aus der Anwendung über this.prop.constant
class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } }
ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') ); |
Varibalen this.state.
Variable Werte werden über this.state übergeben Und über this.setState(..) verändert
class Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; }
tick() { this.setState(state => ({ seconds: state.seconds + 1 })); }
componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); }
componentWillUnmount() { clearInterval(this.interval); }
render() { return ( <div> Seconds: {this.state.seconds} </div> ); } }
ReactDOM.render( <Timer />, document.getElementById('timer-example') );
|
Anwendung mit Component und Events
Input events
Events werden im Constructor zwischen Frontend und Code gebunden
constructor(props) { super(props); this.state = { items: [], text: '' }; //*variablen this.handleChange = this.handleChange.bind(this); //event1 this.handleSubmit = this.handleSubmit.bind(this); //event2 }
|
Im Ausgabe-Code wird die Funktion mit html_input_event={this.eventfunction} zugewiesen
<input id="new-todo" onChange={this.handleChange} value={this.state.text} />
|
Die eigentliche Funktion wird direkt in der Component{..} eingefügt.
handleChange(e) { this.setState({ text: e.target.value }); }
|
Final wird die Componente der AppComponente zugefügt und die App per render angezeigt
ReactDOM.render( <TodoApp />, document.getElementById('todos-example') );
|
class TodoApp extends React.Component { constructor(props) { super(props); this.state = { items: [], text: '' }; //*variablen this.handleChange = this.handleChange.bind(this); //event1 this.handleSubmit = this.handleSubmit.bind(this); //event2 }
render() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <label htmlFor="new-todo"> What needs to be done? </label> <input id="new-todo" onChange={this.handleChange} value={this.state.text} /> <button> Add #{this.state.items.length + 1} </button> </form> </div> ); }
handleChange(e) { this.setState({ text: e.target.value }); }
handleSubmit(e) { e.preventDefault(); if (this.state.text.length === 0) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(state => ({ items: state.items.concat(newItem), text: '' })); } }
class TodoList extends React.Component { render() { return ( <ul> {this.props.items.map(item => ( <li key={item.id}>{item.text}</li> ))} </ul> ); } }
ReactDOM.render( <TodoApp />, document.getElementById('todos-example') );
|
// |
Einbinden externen Libraries
Exteren Komponenten von ThirdParty Anbietern können sehr einfach eingebunden werden
class MarkdownEditor extends React.Component { constructor(props) { super(props); this.md = new Remarkable(); this.handleChange = this.handleChange.bind(this); this.state = { value: 'Hello, **world**!' }; }
handleChange(e) { this.setState({ value: e.target.value }); }
getRawMarkup() { return { __html: this.md.render(this.state.value) }; }
render() { return ( <div className="MarkdownEditor"> <h3>Input</h3> <label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> <h3>Output</h3> <div className="content" dangerouslySetInnerHTML={this.getRawMarkup()} /> </div> ); } }
ReactDOM.render( <MarkdownEditor />, document.getElementById('markdown-example') );
|
Quelle: