react学习—传递元素内容

一、传递元素内容

前面我们学习了传递一些属性给自定义组件，这里我们学习传递元素给自定义组件。

//Comp组件
export default function Comp(props) {
    console.log(props);
    return (
        <div className="comp">
            <h1>组件自身的内容</h1>
            {props.html || <h1>默认值</h1>}
        </div>
    )
}

import React from 'react';
import ReactDOM from 'react-dom';
import Comp from "./Comp"

ReactDOM.render(<Comp html={<h1>传递的元素</h1>} />, document.getElementById('root'));

这种方法和前面传递属性是一样的。

但是这种方法不太符合我们平时书写代码的规范。
这里react提供了一个语法糖：

//Comp
export default function Comp(props) {
    console.log(props);
    return (
        <div className="comp">
            <h1>组件自身的内容</h1>
            {props.children || <h1>默认值</h1>}
        </div>
    )
}

import React from 'react';
import ReactDOM from 'react-dom';
import Comp from "./Comp"

ReactDOM.render((<Comp>
  <h1>传递的元素</h1>
</Comp>), document.getElementById('root'));

如果利用语法糖一次传递多个

ReactDOM.render((<Comp>
  <h1>传递的元素h1</h1>
  <p>传递的元素p</p>
</Comp>), document.getElementById('root'));

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！