コンポーネントのレンダリングされた出力を別のコンポーネントにラップして変更することはできますか？

Question

これは可能ですか？

<span>foo</span> 
// ==> <span>foo</span> 

<spansToDivs> 
    <span>foo</span> 
</spansToDivs> 

// ==> <div>foo</div> 

const component1 = children => <span>{children}</span> 

<component1>foo</component1> 
// ==> <span>foo</span> 

<spansToDivs> 
    <component1>foo</component1> 
</spansToDivs> 

// ==> <div>foo</div> 

Answer 1

あなたはtypeがspanであるかどうかを確認、cloneElement()でそれらのクローンを作成、React.Children.mapを使って子供たちを繰り返すことができ、そして場合はそうdivのように変更します。

const { render } = ReactDOM; 
 

 
const SpansToDivs = ({ children }) => { 
 
    const newChildren = (Array.isArray(children) ? children : [children]).map((child) => { 
 
    const newchild = React.cloneElement(child); 
 
    
 
    newchild.type === 'span' && (newchild.type = 'div'); 
 
    
 
    return newchild; 
 
    }); 
 
    
 
    return (
 
    <div> 
 
     {newChildren} 
 
    </div> 
 
); 
 
}; 
 

 
const component1 = children => <span>{children}</span> 
 

 

 
render(
 
    <SpansToDivs> 
 
    <span>Cats</span> 
 
    <p>Lions</p> 
 
    <span>Dogs</span> 
 
    <component1>Rabbits</component1> 
 
    </SpansToDivs>, 
 
    document.getElementById('app') 
 
);

span { 
 
    color: blue; 
 
} 
 

 
div { 
 
    color: red; 
 
} 
 

 
p { 
 
    color: purple; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 2

const Component1 = props => <span>{props.children}</span> 
 

 
const SpansToDivs = props => <div>{props.children.props.children}</div> 
 

 
const jsx = (
 
    <section> 
 

 
    <SpansToDivs> 
 
     <span>foo</span> 
 
    </SpansToDivs> 
 

 
    <SpansToDivs> 
 
     <Component1>foo</Component1> 
 
    </SpansToDivs> 
 

 
    </section> 
 
) 
 

 
ReactDOM.render(jsx, document.getElementById('root'))

section > div:before { 
 
    content: '<div>'; 
 
} 
 

 
section > div:after { 
 
    content: '</div>'; 
 
} 
 

 
section > div:before, 
 
section > div:after { 
 
    font-style: Consolas; 
 
    font-size: 13px; 
 
    color: #7D2727; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>