对象或非对象函数的属性有什么区别？

Question

使用“ function（style）”无效，但是使用“ function（{style}）”时，请说明原因？

右代码：

export default function Title( { title } ) {
  return (
    <div className="section-title">
      <h4>{title}</h4>
      <div />
    </div>
  );
}

错误代码：

export default function Title( title ) {
  return (
    <div className="section-title">
      <h4>{title}</h4>
      <div />
    </div>
  );
}

Answer 1

功能组件将props object 作为参数。

使用下面的代码行，您正在破坏{strong>正确的title道具。

export default function Title( { title } )

在下面，您将标题作为对象接收，并渲染了标题，这是错误的，因为在反应中您无法渲染对象。

export default function Title( title ) {
  return (
    <div className="section-title">
      <h4>{title}</h4>
      <div />
    </div>
  );
}

另一种正确的方法是

export default function Title( props ) {
  return (
    <div className="section-title">
      <h4>{props.title}</h4>
      <div />
    </div>
  );
}