Aufteilen eines Texts nach Zeichen in einzelne Wörter mit React in der render() Function.
Dabei werden auch gleichzeitig die HTML Elemente aus dem .split(zeichen) erstellt mit der folgenden map(word=>html) funktion
<p>Keywords: {this.state.keywords}</p> <p>Keywords: { (this.state.keywords).split(";").map(keyword => <a href={this.baseURL + "?k=" + encodeURI(keyword)} style={{ margin: '4px' }}>keyword</a> ) } </p> |
React Code with .split(";").map..
import React, { Component } from 'react'; import './Article.css'; import "bootstrap/dist/css/bootstrap.min.css";
export class Article extends Component { //--------< component: Article >--------
//----< compontent >---- static displayName = Article.name; baseURL = "/";
constructor(props) { //-< react: parameter > super(props); //-</ react: parameter > //--< react: variables >-- this.state = { idarticle: 0, loading: true, IDUser: "", title: "", TextContent: "", HtmlContent: "", Folder: "", Keywords: "", nImages: "", nVideos: "", nFiles: "", DtCreated: "", DtEdit: "" } }
//--< component.events >-- componentDidMount() { this.populateData(this.props.match.params.id); } //--</ component.events >-- //----</ compontent >----
//====< functions >====
//*load data from web api async populateData(id) { //--------< populateData() >-------- const response = await fetch('api/articles/' + id); //*get web_data from web api as json-string const data = await response.json(); //*convert json to data //console.log("this.state=" + this.state); //console.log(this.state);
this.setState(state => ({ idarticle :data.idArticle, iduser :data.idUser, title :data.title, textcontent :data.textContent, htmlcontent :data.htmlContent, folder :data.folder, keywords :data.keywords, nimages :data.nImages, nvideos :data.nVideos, nfiles :data.nFiles, dtcreated :data.dtCreated, dtedit :data.dtEdit, loading: false })); //*refresh state of arcticles //--------</ populateData() >-------- } //====</ functions >====
//====< HTML >==== //----< render >---- render() { //--------< render(HTML) >-------- return ( //----< return >---- <div className="submit-form"> { this.state.loading ? ( //--< IsLoading >-- <p>loading..</p> //--</ IsLoading >-- ) : ( //--< IsLoaded >-- <div> <p>IDArticle:{this.state.idarticle}</p> <h3>{this.state.title}</h3> <div>Folder: <a href={this.baseURL + "?f=" + encodeURI(this.state.folder)}>{this.state.folder}</a> </div>
<p>Keywords: {this.state.keywords}</p> <p>Keywords: { (this.state.keywords).split(";").map(keyword => <a href={this.baseURL + "?k=" + encodeURI(keyword)} style={{ margin: '4px' }}>keyword</a> )
} </p>
<p>Date:{this.state.dtcreated}</p> <div dangerouslySetInnerHTML={{ __html: this.state.htmlcontent }} />
</div> //--</ IsLoaded >-- ) } </div> //----</ return >---- ); //--------</ render(HTML) >-------- } //----</ render >----
//====</ HTML >====
//--------</ component: Articles >-------- }
|