react-native - 在 Native Base (React Native) 中的 Accordion 内容中的 JSX

Question

是否可以在本机基础的 Accordion 内容中包含 JSX 代码？

class MyAccount extends React.Component {
    render() {

      const creditCardContent = (
          <Form>
            <Item floatingLabel>
              <Label>Name on Card</Label>
              <Input />
            </Item>
            <Item floatingLabel>
              <Label>Card Number</Label>
              <Input />
            </Item>
            <Item floatingLabel>
              <Label>CVC</Label>
              <Input />
            </Item>
            <Item floatingLabel>
              <Label>Zip Code</Label>
              <Input />
            </Item>
          </Form>
      );
      const dataMenus = [
        { title: "Credit Card", content: creditCardContent },
        { title: "Bank Account (for ACH payments)", content: "Lorem ipsum dolor sit amet" },
        { title: "Recurring Payment", content: "Lorem ipsum dolor sit amet" }
      ];

      return (
        <Container>
          <Content padder>
            <ScrollView>
              <Accordion dataArray={dataMenus} expanded={0}/>
            </ScrollView>
          </Content>
        </Container>
      );
    }
}

结果未显示信用卡内容（下图）

我不确定我做错了什么还是不可能做的。谢谢

标签： react-nativeaccordionnative-base

Answer 1

据我所知，您可以使用renderContent属性来定义它应该如何呈现。您可以将其作为常量或作为renderContent = (item) => { ... }.

但是您现在正在做的是为 dataArray 提供 React.Element ，然后提供一堆它无法呈现的字符串。