是否可以通过将组件包装在另一个组件中来更改组件的渲染输出？

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

您可以使用React.Children.map对子项进行迭代，使用cloneElement()进行克隆，检查type是span，如果是，请将其更改为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

＆＃13;

＆＃13;

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'))

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;