[英]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.元素的内容通过children
属性公开。
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 React 有开箱即用的children
属性,它接受 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.