1. 前言

2. 不用插槽之前

function Message(props) {
            return (
                <div className="msgBox">
                    <div> {props.txt}  <span> x </span> </div>
                </div>

            )
        }
        ReactDOM.render((<div>
           <Message  txt="这是一个消息提示" />
        </div>), app)

  .msgBox {
            background-color: #67C23A;
            padding: 5px 20px;
            color: #FFF;
            border-radius:5px;
        }
 .msgBox span{
            float:right;
            color: #DCDFE6;
        }

3.slot

function Message(props) {
            console.log("瞅瞅这个props 到底是啥:",props)
            return (
                <div className="msgBox">
                    <div> {props.children} <span> x </span></div>
                </div>
            )
        }
        ReactDOM.render((<div>
           <Message>  这确实是个消息提示 </Message>
        </div>), app)

4. 一个标签

  function Message(props) {
            console.log("瞅瞅这个props 到底是啥:",props)
            return (
                <div className="msgBox">
                    <div> {props.children} <span> x </span></div>
                </div>

            )
        }
            var title = "这是个消息"
        ReactDOM.render((<div>
           <Message><p>{title}</p></Message>
        </div>), app)

5. 多个标签

        function Message(props) {
            console.log("瞅瞅这个props 到底是啥:",props)
            return (
                <div className="msgBox">
                    <div> 
                     <h1> {props.children[0]}</h1>  
                          {props.children[1]}
                        <span> x </span>
                        </div>
                </div>

            )
        }
            var title = "温馨提示"
        ReactDOM.render((<div>
           <Message>
            <p>{title}</p>
            <p> 这是一个好消息</p>
            </Message>
        </div>), app)

7. children自动展开

  function Message(props) {
            console.log("瞅瞅这个props 到底是啥:",props)
            return (
                <div className="msgBox">
                    <div> 
                     {props.children}
                        <span> x </span>
                    </div>
                </div>

            )
        }

8.总结

   children
      不加标签 直接就是 字符串内容 {children: " xxx "}
      单个标签是对象     {children: {…}}
      多个是数组     {children: Array(2)}

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉