反應元素本身是否有內部文本，內部 html？

Question

學習反應，我看到這樣的元素示例，

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

它支持嗎？

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

如果是這樣，如何獲得“美好的一天”而“名稱”屬於道具？

謝謝 ！

Answer 1

元素的內容通過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>

Answer 2

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>