[react]有a,b俩组件和一个按钮c,功能上c属于a,但UI显示上需要显示在b里面，如何处理？

Question

或者，换个说法，原本有a,b俩组件（平级关系），a组件里面有个按钮c，某天设计师要求把这个按钮c移动到组件b里面去，功能完全不变，怎么优雅处理

Answer 1

没明白你的意思，不过按照字面意思就是这样。

<Bcomponent>
    <Acomponent justRenderC={true}>
        { justRenderC ? <Cbutton></Cbutton> : <SomeThingOther /> }
    </Acomponent>
</Bcomponent>

---

那就是要求Cbutoon的功能独立，可以使用HOC的形式。

const HOC = props => WarpComponent => {
    return (
        <WarpComponent>
            <Cbutton/>
        </WarpComponent>
    )
}

const Acomponent = HOC()(A)
const Bcomponent = HOC()(B)