将 JSX 内容移动到单独的文件时无法正确呈现

Question

假设我有这个：

// Parent component:

export default function() {
  return (
    <React.Fragment>
      <Toolbar slot="fixed" bottom>
        This will be fixed to bottom of page
        {order.name}
      </Toolbar>
    </React.Fragment>
  )
}

我想用尽可能少的代码制作父组件 - 共享分成小块，因此工具栏将位于子组件中，因此它将是看起来像这样：

// Parent component: 

export default function() {
  return (
    <React.Fragment>
      <MyAwesomeToolbar order={order} />
    </React.Fragment>
  )
}

// MyAwesomeComponent: 

export default function(self) {
  let { order } = self.props
  return (
    <Toolbar slot="fixed" bottom>
      This will be fixed to bottom of page
      {order.name}
    </Toolbar>
  )
}

在第一个例子中——当工具栏实际上是硬编码在父组件中时，一切正常 - 工具栏位于页面底部。但是当以第二种方式进行时，工具栏不在底部而是在底部在没有 fixed 属性的情况下也浮动在页面中间。

我尝试使用 class 或只是一个简单的渲染文件 (.JSX) 制作组件。两者都不起作用。

如何使用与父组件相同的属性和样式渲染子组件？

Answer 1

移动 <React.Fragment /> 是否有效？

// Parent component: 

export default function() {
  return (
      <MyAwesomeToolbar order={order} />
  );
}

// MyAwesomeComponent: 

export default function(self) {
  let { order } = self.props;
  return (
    <React.Fragment>
      <Toolbar slot="fixed" bottom>
        This will be fixed to bottom of page
        {order.name}
      </Toolbar>
    </React.Fragment>
  );
}

将 JSX 内容移动到单独的文件时无法正确呈现

When moving JSX content to separate file it doesn't render properly

javascript

reactjs

html-framework-7