代码之家 › 专栏 › 技术社区 › DanMad

通过props将html元素与react.js交换

reactjs javascript

DanMad · 技术社区 · 6 年前

背景:新的反应。想要打造一个多才多艺的 <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>

提前谢谢!

2 回复 | 直到 6 年前

Bhanupal Singh Rathore 6 年前

渲染方法应该如下所示

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

Midhun G S 6 年前

HTML格式 String 将无法正确呈现。
尝试改变 Wrapper 功能:

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

推荐文章