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）来制作组件。两者都不起作用。

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

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内容移动到单独的文件时，无法正确呈现

1 个答案: