javascript - createElement 有条件地设置 HTML 标签 React JS

Question

考虑一下：

const Component = React.createElement(props.type ? "p" : "div", {
    className: "fff"
})

如何有条件地设置 HTML 标签（一行）？

或者，如果可能的话，就在 JSX 内部（类似的东西）：

<props.type ? "p" : "div" />

标签： javascriptreactjs

Answer 1

如果您使用的是 jsx，那么我建议您在您的组件中使用它。

const Component = (props) => {
  const content = // whatever content you want

  return props.type ? (
    <p>
      {content}
    </p>
  ) : (
    <div>
      {content}
    </div>
  );
};

这将有条件地返回你想要的，你可以用这种语法在这个级别上做各种各样的事情。

或者，如果它不是特定组件而只是在代码中，则同样适用。

{props.type ? (
  // code for <p>
) : (
  // code for <div>
)

如果您有共同的内容，只需将其存储在 const 某处，并将其插入标签之间。