如何写一个hoc组件向组件中追加children?

Question

如何进行组件包装后向组件内部插入一个span标签?
比如子组件是：

const Child = () => <button></button>

如何写一个父组件Parent

const Parent = () => {...}

使其进行<Parent><Child /></Parent>调用后，将返回的html从
<button></button>变成<button><span></span></button>

Answer 1

function Child(props){
    return (
        <button>{props.children}</button>
    )
}

function hoc(Child) {
    return function() {
        return (
            <Child><span></span></Child>
        )
    }
}

const Parent = hoc(Child);

Answer 2

这样吗？

const Child = (props) => <button>{props.children}</button>
const Parent = (props) => <Child><span>123</span></Child>

const res = <Parent></Parent>

我想不明白

<Parent><Child /></Parent>

这个是在干嘛？？？？