Javascript React中标签的动态选择

我有一些使用SVG的React组件，它们可以包含在SVG中，也可以不包含在SVG中。因此，我希望有一种简单的方法，让它们在

svg

或

g

内部进行渲染，具体取决于参数，例如：

export default class SVGComponent extends React.Component{
  get containerElement() {
    return this.props.inSVG ? 'g' : 'svg';
  }
  render() {
    return(<{containerElement}>
      <text>Extendable component</text>
    </{containerElement}>);
  }
}

导出默认类SVGComponent扩展React.Component{
获取containerElement（）{
返回this.props.inSVG？'g'：'svg'；
}
render（）{
返回(
可扩展组件
);
}
}

---

这不起作用：您不能以这种方式在JSX中使用模板注入。我还有别的办法吗？似乎我可以做

React.DOM[containererement]

，但我认为React不喜欢混合React.DOM和JSX，我不想仅仅为了这个函数就完全使用React.DOM语法。

您可以这样做

render(){
   var content = <text>Extendable component</text>;
   if(this.props.inSVG){
       return (
           <g>{content}</g>
       );
   }
   else {
       return (
           <svg>{content}</svgg>
       );
   }
}

const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>

render（）{
var内容=可扩展组件；
如果（本道具inSVG）{
返回(
{content}
);
}
否则{
返回(
{content}
);
}
}

你可以这样做

render(){
   var content = <text>Extendable component</text>;
   if(this.props.inSVG){
       return (
           <g>{content}</g>
       );
   }
   else {
       return (
           <svg>{content}</svgg>
       );
   }
}

const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>

render（）{
var内容=可扩展组件；
如果（本道具inSVG）{
返回(
{content}
);
}
否则{
返回(
{content}
);
}
}

我可能会这样做：

export default class SVGComponent extends React.Component{
  get containerElement() {
    var content = (<text>Extendable component</text>);
    return this.props.inSVG ? (<g>{content}</g>) : (<svg>{content}</svg>);
  }
  render() {
    return({containerElement()});
  }
}

导出默认类SVGComponent扩展React.Component{
获取containerElement（）{
var content=（可扩展组件）；
返回this.props.inSVG？（{content}）：（{content}）；
}
render（）{
返回（{containerElement（）}）；
}
}

但是，这实际上取决于

的动态性

---

如果子元素是非常动态的，您可能希望呈现

this.props.children

，然后添加为组件的子元素。

我可能会这样做：

export default class SVGComponent extends React.Component{
  get containerElement() {
    var content = (<text>Extendable component</text>);
    return this.props.inSVG ? (<g>{content}</g>) : (<svg>{content}</svg>);
  }
  render() {
    return({containerElement()});
  }
}

导出默认类SVGComponent扩展React.Component{
获取containerElement（）{
var content=（可扩展组件）；
返回this.props.inSVG？（{content}）：（{content}）；
}
render（）{
返回（{containerElement（）}）；
}
}

但是，这实际上取决于

的动态性

---

如果子元素是非常动态的，您可能希望呈现

this.props.children

，然后添加为组件的子元素。

看看这个答案

看起来您可以创建一个首字母大写的变量，并将其用作如下组件

render(){
   var content = <text>Extendable component</text>;
   if(this.props.inSVG){
       return (
           <g>{content}</g>
       );
   }
   else {
       return (
           <svg>{content}</svgg>
       );
   }
}

const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>

constcustomtag=`h${this.props.priority}`；
你好

---

如果

this.props.priority==3

这将呈现

Hello

查看此答案

看起来您可以创建一个首字母大写的变量，并将其用作如下组件

render(){
   var content = <text>Extendable component</text>;
   if(this.props.inSVG){
       return (
           <g>{content}</g>
       );
   }
   else {
       return (
           <svg>{content}</svgg>
       );
   }
}

const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>

constcustomtag=`h${this.props.priority}`；
你好

---

如果

this.props.priority==3

这将呈现

Hello

React.createElement（this.containerElement（），{}，asdasd）；像这样的东西可能有用。它混合了JSX和JS thoughReact.createElement（this.containerElement（），{}，asdasd）的概念；像这样的东西可能有用。它混合了JSX和JS的概念，虽然这不是动态的。它在编译时选择一个静态定义的标记。这不是动态的。它是在编译时选择静态定义的标记。