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

Question

我正在尝试让 <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

Answer 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

P.S。 JSX 标签和上下文是 JSX 标签的字符串是有区别的，它们不一样

Answer 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

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

insert or remove enclosing element based on ternary operator JSX

escaping

jsx

reactjs