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

Question

I'm trying to figure out if it's possible to compose a React component without the use of JSX? I'm expecting the header element to render with the nested h1 and h2. However, what is actually showing is just the paragraph tag. Why is that React element the only one rendering?

This Codepen example on the React website was used as a reference to mimic the compiled JavaScript, but like I said I'm not getting the same outcome when just using 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

You needed another surrounding element in your App component. Otherwise it will only show paragraph, the last instance of React.createElement .

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

Answer 2

Unless you have a specific reason for not using JSX, I (and in fact the React docs) would recommend against it.

You can make your life a whole lot easier by just using JSX.

eg

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')
);