Native Base (React Native) 中手风琴内容中的 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>
      );
    }
}

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

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

Answer 1

据我所知，您可以使用 renderContent 属性来定义它的呈现方式。您可以将其作为常量或 renderContent = (item) => { ... } 传递。

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

Native Base (React Native) 中手风琴内容中的 JSX

JSX inside Accordion content in Native Base (React Native)

accordion

react-native

native-base