Question

我为Picker组件创建了一个包装器，并且希望添加一个处于条件状态的孩子

我尝试这段代码

render() {
    const { children, ...rest } = this.props;

    return (
      <Picker {...rest}>
        {rest.selectedValue === undefined ? (
          <Picker.Item value="1" label="1" />
        ) : null}
        {children}
      </Picker>
    );
  }

我收到此错误

TypeError：null不是一个对象（正在评估“ o.props”）

我也尝试使用undefiened而不是null和short circuit条件，但是在这种情况下我也遇到错误。

也注意如果我删除条件并在子元素的工作之前添加一个元素。像这样

<Picker.Item value="1" label="1" />
{children}

已更新

我发现问题是当条件为false时，例如此make错误

{false && (<Picker.Item value="1" label="1" />)}

博览会项目https://snack.expo.io/@cooper47/mad-waffle （更改选择器并查看错误）

我认为问题是当我将children与undefined（条件的结果）并置时，因为尝试此操作时会遇到相同的错误

<Picker {...rest}>
   {undefined} // result of short circuit 
   {children} 
</Picker>

为什么我在使用conditon时出现此错误，而在没有条件的情况下没有错误？
如何在this.props.children之前添加元素？
在children的开头是否总有添加元素？例如children.add(<Picker.Item...>)

我发现它实际上是本机反应中的错误

这是相对问题https://github.com/facebook/react-native/issues/25141#issuecomment-498651856

Answer 1

注意：条件没有问题，错误取决于包装器（Picker）内部调用。

我的猜测是Picker内部将其子级道具称为（期望Picker.Item），如果它伪造，它可能会检查您的情况props并因此抛出undefined props错误

<Picker>
  {condition && <Picker.Item value="1" label="1" />}   
  // ^ Picker wrapper may check null.props, undefined.props, false.props etc

  {children}
</Picker>

在这种情况下，使条件超出渲染范围：

  const conditionChildren = condition ? (
    <> <Picker /> {children} </> ) : (children);
  return {conditionChildren}

如何在this.props.children之前添加元素？

使用React.createElement或内联调用组件：

function ConditionChildren({ children, condition }) {
  return (
    <>
      {condition && <Picker />}
      // or {condition && React.createElement(Picker)}
      {children}
    </>
  );
}

反正在孩子的第一个添加元素吗？例如children.add（）

  const addFirstToChildren = [
    React.createElement(Picker),
    ...React.Children.toArray(children)
  ];
return {addFirstToChildren}

使用通用解决方案检查演示

Answer 2

尝试下面的PureComponent代码

import React, { PureComponent } from 'react'
import { View, Text, TouchableOpacity, Picker } from 'react-native'

export default class SelectBox extends React.PureComponent {
    constructor(props) {
    super(props)
    }
    render() {
     const { options, value, onChageText } = this.props
      let Alloptions = options.map((item, key) => {
         return (<Picker.Item label={item.name} value={item.value} key={key} />)
      })
      return (
        <Picker selectedValue={value} onValueChange={onChageText}>
       {/* If you want to add default option here  */}
         {/* <Picker.Item label="Select Location..." value="" /> */}
              {Alloptions}
        </Picker>
     )
    }
}

和您的组件

<SelectBox
options={[{name:'aaa',value:'11'},{name:'bbbb',value:'22'}]}
value={''}
onChageText={this.selectLocation}
/>
 selectLocation(itemValue, itemIndex) {
...your code
}

谢谢

首先在子级子级中添加孩子

2 个答案: