Question

上下文：React的新手。想要构建通用的<Wrapper />组件。

我的问题是：“如何根据道具的值更改呈现的HTML元素？”

我的组件如下所示：

const Wrapper = ({ elem = 'div', name, children }) => {
  const statement = `<${elem} className='oc-${name}-wrapper'>{children}</${elem}>`;
  return statement;
};

此准解决方案仅呈现出字符串。如何编写上面的内容，以便可以将组件与可互换的元素一起使用，如下面的两个示例，以便分别实现<main>和<div>？当前，变量已成功注入，但是代码以字符串形式呈现，而不是执行。

// usage
<Wrapper elem="main" name="splash"><p>foo</p></Wrapper>
// output
<main class="oc-splash-wrapper"><p>foo</p></main>

// usage
<Wrapper name="content"><p>bar</p></Wrapper>
// output
<div class="oc-content-wrapper"><p>bar</p></div>

提前谢谢！

Answer 1

HTML String无法正确呈现。
尝试更改Wrapper函数：

const Wrapper = ({ elem = 'div', name, children }) => {
  const statement = `<${elem} className='oc-${name}-wrapper'>{children}</${elem}>`;
  return <div dangerouslySetInnerHTML={{ __html: statement  }} />;
};

Answer 2

您的Render方法应如下所示

class Wrapper  extends React.Component {
  render() {
  	const CustomTag = (`${this.props.elem}` !== 'undefined')?`${this.props.elem}`: "div";
    const classIs = `os-${this.props.name}-wrapper`;
    return <CustomTag className={classIs}>{this.props.children}</CustomTag>
  }
 }

通过props与React.js交换HTML元素

2 个答案: