javascript - 将 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>
  )
}

在第一个示例中 - 当工具栏实际上是在父组件中硬编码时，一切正常 - 工具栏位于页面底部。但是当使用第二种方式时，工具栏只是不在底部，而是浮动在页面中间，没有固定属性。

我试图使用类或只是一个简单的渲染文件（.JSX）来制作一个组件。两者都没有工作。

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

标签： javascriptreactjshtml-framework-7

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>
  );
}