我可以在React Native的Picker Item的标签中使用多个元素还是嵌套元素? [英] Can I use multiple or nested elements in the Label of a Picker Item in React Native?

问题描述

我正在将React Native与NativeBase一起使用，并希望使Picker的标签比仅一个简单的文本字符串更复杂.

I'm using React Native with NativeBase and would like to make the labels of my Picker more complicated than just one plain string of text.

但是，甚至有可能将元素作为标签传递，比如将多个子元素包装在单个顶级元素中吗?

But is it even possible to pass elements as the label, say multiple child elements wrapped in a single top-level element?

还是Pickers仅支持纯文本作为标签?

Or do Pickers only support plain text as labels?

根据bennygenel的要求，这是我尝试过的内容的版本:

As requested by bennygenel, here's a version of what I've tried:

export default class ThingPicker extends React.Component {

  render() {
    const {
      initialThing,
      things,
      onThingChanged,
    } = this.props;

    const orderedThings = things.sort();

    return (
      <Picker
        selectedValue={initialThing}
        onValueChange={onThingChanged}>
        {buildThingItems(orderedThings)}
      </Picker>
    );
  }
}

function buildThingItems(orderedThings) {
  let items = orderedThings.map(th => {
    const it = th === "BMD" ? (<Text key={th} label={"foo"} value={"bar"}}>Hello</Text>)
    : (<Picker.Item key={th} label={th} value={th} />);

    return it;
  });
}

推荐答案

是的！有可能，对于React/JSX代码来说，它可能看起来不太正确".只需创建所需的元素并将其分配给标签字段即可:

Yes! It is possible, it just might not look very "right" for React/JSX code. Just create the elements you need and assign them to the label field:

function buildThingItems(orderedThings) {
  let items = orderedThings.map(th => {
    const it = (<Picker.Item
      key={th}
      label={currency === "BMD" ? (<Text>Hello</Text>) : th}
      value={th} />);

    return it;
  });
}

这篇关于我可以在React Native的Picker Item的标签中使用多个元素还是嵌套元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！