基于三元运算符 JSX 插入或删除封闭元素答案

【问题标题】：insert or remove enclosing element based on ternary operator JSX基于三元运算符 JSX 插入或删除封闭元素
【发布时间】：2019-11-27 15:41:26
【问题描述】：

我正在尝试使 <pre> 标记出现在我需要的代码中或不显示。

如果文本是代码，我希望存在 <pre> 标签如果文本不是代码，那么我不希望它们存在

下面的代码会根据 textIsCode = 1 的值而变化，然后 <pre> 标记将显示为文本。如果我删除了 <pre> 周围的引号，那么代码不起作用我需要不同的转义字符还是我试图以错误的方式做某事？

const CodeContainerMolecule = (props) => {
  return (
    <section id={props.CodeContainerMolecule_Id} 
    className={props.CodeContainerMolecule_Style}>
      {props.textIsCode === "1" ? '' : `<pre>`}
        <p className="container_component_text">
          {props.text}
        </p>
        {props.textIsCode === "1" ? '' : `</pre>`}
    </section>
  );
};

export default CodeContainerMolecule

【问题讨论】：

标签： reactjs escaping jsx

【解决方案1】：

将<pre/> 标记作为字符串非常奇怪，您最好将孩子保存在一个变量中，然后有条件地包装它。像这样的：

const CodeContainerMolecule = (props) => {
  const child = (
    <p className="container_component_text">
      {props.text}
    </p>
  );

  return (
    <section id={props.CodeContainerMolecule_Id} 
    className={props.CodeContainerMolecule_Style}>
      {props.textIsCode === "1" ? <pre>{child}</pre> : child}
    </section>
  );
};

export default CodeContainerMolecule

附： JSX 标签和上下文是 JSX 标签的字符串是有区别的，它们是不一样的

【讨论】：

【解决方案2】：

在<pre> 中嵌套<p> 段落并不是一种理想的HTML 格式。

const CodeContainerMolecule = (props) => {
  return (
    <section id={props.CodeContainerMolecule_Id} 
    className={props.CodeContainerMolecule_Style}>
      {props.textIsCode === "1" ? <p>{props.text}</p> : 
      (<pre> {props.text} </pre>)}
    </section>
  );
};

导出默认 CodeContainerMolecule

【讨论】：

这不太对，如果文本代码是“1”，他仍然想要<p/> 标签的东西，他只是不想要包装<pre/> 标签。在您的回答中，如果文本代码为“1”，他将不会得到 anything
谢谢！他们都是很好的答案。也感谢您纠正我的拼写！
@Jayce444 在这种情况下，我同意你的看法。但我的回答更多的是关于正确的做法，而不是他想要的方式。他可以使用另一种类型的容器元素，例如 div 来包装，而不是 <pre>。