Question

我有一些使用SVG的React组件，可以包含在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}>);
  }
}

这不起作用：您不能以这种方式在JSX中使用模板注入。还有其他方法可以接近它吗？好像我可以做React.DOM[containerElement]，但我收集React不喜欢混合React.DOM和JSX，我不想完全转移到React.DOM语法只是为了这个函数。

Answer 1

看一下这个答案Dynamic tag name in jsx and React

似乎你可以创建一个首字母大写的变量，并像使用像

这样的组件一样使用它

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

如果this.props.priority == 3这将呈现<h3>Hello</h3>

Answer 2

你可以这样做

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

Answer 3

我可能会这样做：

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()});
  }
}

但是，这实际上取决于<text>的动态程度。

如果子元素非常动态，您可能希望渲染this.props.children并添加为组件的子元素。

在React中动态选择标签

3 个答案: