javascript - How to render text and components at the same time -


i'm trying write react component gets text string, match: urls, emails, mentions, tags , returns btn components instead of them. there snippet of code:

var stringparser = react.createclass({   getdefaultprops: function() {     return {       type: 'div'     }   }    , callbackmention: function(username) {     console.log('mention ' + username)   }     , callbacktag: function(tag) {     console.log('tag ' + tag)   }     , render: function() {     var self =     var str = self.props.text     var re = [       "\\b((?:https?|ftp)://[^\\s\"'<>]+)\\b",       "\\b(www\\.[^\\s\"'<>]+)\\b",       "\\b(\\w[\\w.+-]*@[\\w.-]+\\.[a-z]{2,6})\\b",        "#([a-z0-9]+)",       "@([a-z0-9]+)"]     re = new regexp(re.join('|'), "gi")      var parse = str.replace(re, function(parsed, url, www, email, tag, username){       if(url && self.props.url) return ( <btn callback={self.callbacktag} text={url}/> )       if(www && self.props.url) return ( <btn callback={self.callbacktag} text={www}/> )       if(email && self.props.email) return ( <btn callback={self.callbacktag} text={email}/> )       if(tag && self.props.tag) return ( <btn callback={self.callbacktag} text={tag}/> )       if(username && self.props.username) return ( <btn callback={self.callbackmention} text={username}/> )       return parsed     })     console.log(parse)     return react.createelement(self.props.type, self.props, parse)   } })

but when try parse such line:

 <stringparser classname="stringy" text={'hello www.bar.com#123 mail me @ foo@d.com twitler me #123 @user123'}/>

i get:

hello [object object] mail me @ [object object] twitler me [object object] [object object]

i have 2 ways solve problem:

  1. instead of btn component return 'span class="..." onclick="this.callbacktag">...'

  2. convert objects string. how?

how solve problem?

string.prototype.replace() coerces whatever return given replacer function string (hence '[object object]' you're seeing), want retain react components you're creating objects rendered react.

you write own replace function returns array rather string:

function replacetoarray(text, re, replacer, thisarg) {   var lastindex = 0   var match   var result = []    while ((match = re.exec(text)) !== null) {     // text preceding match     if (lastindex !== match.index) {       result.push(text.slice(lastindex, match.index))     }     result.push(replacer.apply(thisarg, match))     lastindex = re.lastindex   }   // text following last match   if (lastindex !== text.length - 1) {     result.push(text.slice(lastindex))   }    return result }

then should work:

var parse = replacetoarray(str, re, function(parsed, url, www, email, tag, username) {   if (url && this.props.url) return <btn callback={this.callbacktag} text={url}/>   if (www && this.props.url) return <btn callback={this.callbacktag} text={www}/>   if (email && this.props.email) return <btn callback={this.callbacktag} text={email}/>   if (tag && this.props.tag) return <btn callback={this.callbacktag} text={tag}/>   if (username && this.props.username) return <btn callback={this.callbackmention} text={username}/>   return parsed }, this)

note: since you're returning array components in it, react complain if don't have uniquekey prop can use identify them on subsequent renders, you'll need provide 1 in components you're generating if want silence warning.


Comments

Post a Comment

Popular posts from this blog

Email notification in google apps script -

https://support.google.com/docs/answer/91588?hl=en i have sheet the cells filled in data pulled via apps script, website. pull in exact same data, not. on old sheets version use able emails when data "changes" different value. new sheets, email when new data pasted cells, though exact same data......and, can't set @ ranges anymore, entire document. there easy way watch cells when data changes, , email myself? this looks lot you're trying do. for checking whether value has changed after edit, this gives necessary information it. hence, know whether new value same 1 or not. implementing "workaround" talked in second link, able compare , send email myself if value changed. initiate onedit trigger goes off onedit function uses these lines after checks in place have passed. var email = "xyz@whatever.com"; mailapp.sendemail(email, "triggermail", "a change has occurred in sheet"); note: sends "notification...
Read more

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

javascript - IE11 incompatibility with jQuery's 'readonly'? -

the code i'm running has no issues in firefox, or chrome. user typing 1 textbox, tabs next , can continue typing that. when run webpage on ie11, user tabs next textbox , can't type in. textbox has double-clicked before user can insert anything. i've googled , seems ie give problems when using older jquery (i.e. prefers 'prop' 'attr' ). in code below jquery's readonly keyword being used in way ie11 no longer recognise/accept? i assume issue readonly , removeclass('ignore') working expected. //when focus on textbox 1 $("#field1").focus(function() { //remove readonly property textbox 1 $('#field1').prop('readonly', false).removeclass('ignore'); //add readonly property other textboxes $('#field2, #field3, #field4') .prop('readonly', 'readonly').addclass('ignore').val(''); }); i'm using jquery 2.1.3 ...
Read more