Question

我正在使用https://github.com/GeekyAnts/react-native-easy-grid构建一个简单的自定义表组件。现在，我有4个自定义组件，表格，行，ThColumn，TdColumn。可以猜测，此层次结构就像在HTML中一样起作用，并且这些组件仅添加了一些自定义样式，例如使标题文本变为灰色，并且不需要每次都编写Text组件等。现在，当我使用新的闪亮组件构建表时，不行。

这是每个组件的外观。表格

({children, ...props}) => <Grid {...props}><Text>{children}</Text></Grid>

行

({children, ...props}) => <Row {...props}><Text>{children}</Text></Row>

TdColumn / ThColumn

({children, ...props}) => <Col {...props}><Text>{children}</Text></Col>

如您所见，这些组件并没有做太多。 TRow和ThColumn具有一些自定义样式，例如边距和颜色，但与flexbox无关。

这有效

    <Grid>
      <Row>
        <Col><Text>Some Heading</Text></Col>
      </Row>
      <Row>
        <Col><Text>Some Text</Text></Col>
      </Row>
    </Grid>

这不起作用（我将所有文本都放在同一行中）

    <Table>
      <TRow>
        <ThColumn>Some Heading</ThColumn>
      </TRow>
      <Trow>
        <TdColumn>Some Text</TdColumn>
      </Trow>
    </Table>

现在我认为，因为在行的顶部有行，而在实际col的顶部有thcolumn / tdcolumn，所以这很麻烦。

我想要>

的答案

我对吗？
如果我是对的，我该如何创建将返回实际行和列而不是thcolumn和trow的组件。

Answer 1

看到您的组件定义，我想您在Col定义中缺少Text组件。请记住，如果不在React Native中使用Text ，则无法渲染文本。

所以我要这样定义Col

({children, ...props}) => <Col {...props}><Text>{children}</Text></Col>

第二个“行”中也有错字。它应该说“行”。

最后，最好以Codesandbox

之类的形式提供完整的组件定义。

希望有帮助

如何在不将组件添加到JSX树中的情况下创建React组件

1 个答案: