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 helloElement = <CComponent classname='xyz' content='helloWorld' />

Answer 2

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

Answer 3

根据反应文档：

React.createElement(

   type,

   [props],

   [...children]

)

<CComponent>{{ classname: "xyz", content: "helloWorld" }}</CComponent>这是由 babel 编译为：

var helloElement = React.createElement(CComponent, null, {

  classname: 'xyz',

  content: 'helloWorld'

})

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

被编译为

var helloElement= React.createElement(CComponent, {

  classname: "xyz",

  content: "helloWorld"

})  

因此在 UI 上呈现

Answer 4

使用 babel 7 和 React >= 16 是行不通的。CComponent 获取带有 {classname,content} 对象的 Children 属性。

您可以尝试稍微更改一下语法，它将完美呈现

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