javascript - React - How to return and string of HTML -
i guess i'm old fashioned , build strings of html , data. expecting react handle nicely when return string. there , obvious approach? , <br> doesn't seem work place. there substitute?
(below: cut , paste .html file , it'll run.)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="root"></div> <script type="text/babel"> var sportspeople = [ {thegame: 'football', name: 'tom brady' }, {thegame: 'basketball', name: 'le bron james' } ] class banner extends react.component { constructor(props) { super(props); }; render() { return ( <div>big banner on top</div>); } } class anotherline extends react.component { constructor(props) { super(props); }; render() { let htmlstuff = ""; let worktable = this.props.stars; (let = 0; < worktable.length; i++) { htmlstuff += worktable[i].thegame; htmlstuff += "<p> - </p>"; htmlstuff += worktable[i].name; htmlstuff += "<br>"; } console.log ( { htmlstuff } ); return ( <div> { htmlstuff } </div> ); } // end render } // end class //============================== class main extends react.component { constructor(props) { super(props); }; render() { return ( <div> <banner /> <anotherline stars = { sportspeople } /> </div>); } } // ========================================= reactdom.render( <main />, document.getelementbyid('root') ); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> </body> </html>
maybe try using dangerouslysetinnerhtml prop inside anotherline component this:
return (<div dangerouslysetinnerhtml={{__html:htmlstuff}}</div>) see docs here better explanation: https://facebook.github.io/react/docs/dom-elements.html
Comments
Post a Comment