React 自定义组件未渲染

Question

*自定义组件未在 UI 上渲染，另请注意，我有 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

您需要将 props 传递给组件，如下所示：const&nbsp;helloElement&nbsp;=&nbsp;<CComponent&nbsp;classname='xyz'&nbsp;content='helloWorld'&nbsp;/>

Answer 2

您将作为孩子传递您的值，要将值作为道具传递，您可以这样做：<CComponent classname='xyz' content='helloWorld' />

Answer 3

根据反应文档：React.createElement(&nbsp; &nbsp;type,&nbsp; &nbsp;[props],&nbsp; &nbsp;[...children])<CComponent>{{ classname: "xyz", content: "helloWorld" }}</CComponent>这是由 babel 编译为：var helloElement = React.createElement(CComponent, null, {&nbsp; classname: 'xyz',&nbsp; content: 'helloWorld'})但<CComponent classname='xyz' content='helloWorld' />被编译为var helloElement= React.createElement(CComponent, {&nbsp; classname: "xyz",&nbsp; content: "helloWorld"})&nbsp;&nbsp;因此在 UI 上呈现

Answer 4

使用 babel 7 和 React >= 16 是行不通的。CComponent 获取带有 {classname,content} 对象的 Children 属性。您可以尝试稍微更改一下语法，它将完美呈现<CComponent&nbsp;{...{&nbsp;className:&nbsp;"xyz",&nbsp;content:&nbsp;"helloWorld"&nbsp;}}&nbsp;/>