简体   繁体   中英

Does react element itself has inner text, inner html?

Learning react, i see element examples like this,

const element = <Welcome name="Sara" />;

Does it support ?

const element = <Welcome name="Sara">good day </Welcome>;

If so, how to get "good day" while "name" belongs to props ?

Thanks !

The content of the element is exposed through the children prop.

 const Welcome = (props) => { return <div> <p>Hello {props.name}!</p> {props.children} </div> }; ReactDOM.render(<Welcome name="Sara">good day </Welcome>, document.body);
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

React has children prop out of the box, which accepts nested content inside Component

 function Welcome (props) { console.log('props.name', props.name) console.log('props.children', props.children) return <h1>{props.name} {props.children}</h1> } function App () { return ( <div> <Welcome name="Sara">good day </Welcome> <Welcome name="Sara" /> </div> ); } ReactDOM.render(<App />, document.body)
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM