反应自定义组件未呈现

Question

* Custom component is not getting render on UI , also note that I have element by id: root

function CComponent(prop) {
  const element = (
    <div className="container">
      <div className={prop.classname}>{prop.content}</div>
    </div>
  );

  return element;
}

const helloElement = (
  <CComponent>{{ classname: "xyz", content: "helloWorld" }}</CComponent>
);

console.log(helloElement);
ReactDOM.render(helloElement, document.getElementById("root"));

Answer 1

You need to pass props to component like this:

const helloElement = <CComponent classname='xyz' content='helloWorld' />

Answer 2

You are passing your values as children, to pass values as props, you do this:
<CComponent classname='xyz' content='helloWorld' />

Answer 3

According to react doc:

React.createElement(
   type,
   [props],
   [...children]
)

<CComponent>{{ classname: "xyz", content: "helloWorld" }}</CComponent> this was compiled by babel to:

var helloElement = React.createElement(CComponent, null, {
  classname: 'xyz',
  content: 'helloWorld'
})

But <CComponent classname='xyz' content='helloWorld' />

got compiled to

var helloElement= React.createElement(CComponent, {
  classname: "xyz",
  content: "helloWorld"
})  

Hence was rendered on UI

Answer 4

With babel 7 and react >= 16 it wont work. CComponent gets a children prop with {classname,content} object.

You can try change the syntax a bit and it will render perfectly to

<CComponent {...{ className: "xyz", content: "helloWorld" }} />