我可以在 React 中编写没有 JSX 的组件吗？

Question

我想知道是否可以在不使用 JSX 的情况下编写 React 组件？我期望标题元素使用嵌套的 h1 和 h2 呈现。但是，实际显示的只是段落标签。为什么 React 元素是唯一的一个渲染？

React 网站上的这个 Codepen 示例被用作模拟编译后的 JavaScript 的参考，但就像我说的那样，我只使用 React.createElement() 并没有得到相同的结果。 https://codepen.io/pen?editors=0010

var Header = createReactClass({
  render: function() {
    return React.createElement(
      "header", null, React.createElement(
        "h1", {"className": "main"}, this.props.title
      ), React.createElement(
        "h2", {"className": "submain"}, this.props.subtitle
      )
    )
  }
});

function App() {
  return (
    React.createElement(Header, {"title": "A", "subtitle": "B"}),
    React.createElement("p", null, "Lorem Ipsum")
  );

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

您的 App 组件中需要另一个周围元素。否则它只会显示段落，React.createElement 的最后一个实例。

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement(Header, { title: "A", subtitle: "B" }),
    React.createElement("p", null, "Lorem Ipsum")
  );
}

Answer 2

除非你有特定的理由不使用 JSX，否则我（实际上是 React 文档）会建议不要使用它。

你可以通过使用 JSX 让你的生活变得更轻松。

例如

const Header = (props) => {
  const { subtitle, title } = props;

  return (
    <>
      <h1 className="main"> {title} </h1>
      <h2 className="submain"> {subtitle} </h2>
    </>
  );   
}

function App() {
  return (
   <React.Fragment>
    <Header title="hello" subtitle="world" />
    <p>Lorem Ipsum</p>
   </React.Fragment>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);