如何在不向 JSX 树中添加组件的情况下创建 React 组件答案

【问题标题】：How to create a React component without adding component to the JSX tree如何在不向 JSX 树中添加组件的情况下创建 React 组件
【发布时间】：2019-05-11 16:03:51
【问题描述】：

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

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

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

Trow

({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>

现在我认为，因为在 row 的顶部有 trow，在实际 col 的顶部有 thcolumn/tdcolumn，所以这是破坏性的。

我想要>

的答案

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

【问题讨论】：

如果你能提供你收到的错误会很好。每个组件的代码都是一样的。不知道组件是如何编码的，很难猜到。
@Nahue，我已经更新了我的问题，请检查。我没有收到任何错误。正如我提到的，我没有得到想要的输出。 Row 应该换行。但就我而言，标题行和正文行中的所有文本都在同一行。
好吧，看到这些定义，我可以说您在 Col 定义中缺少 Text 组件。我要写一个答案。
我已将它们排除在外，以向您展示组件的概念。我已将它们添加到问题中，以避免任何混淆。
您也有错字。在第二个“Trow”应该说“TRow”。请注意这一点。

标签： javascript reactjs react-native

【解决方案1】：

看到您的组件定义，我猜您在 Col 定义中缺少 Text 组件。请记住，如果不使用 React Native 中的 Text，您将无法呈现文本。

所以我会这样定义Col

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

另外，您在第二个“Trow”中有错字。它应该说“TRow”。

最后，如果您能以Codesandbox 之类的形式提供完整的组件定义，那将是可取的

希望对你有帮助

【讨论】：