这是我的代码

Question

我尝试使用本机做出反应，我想在更改选择器值时显示不同的选项。基本上当我选择拾取器上的第一个选项时，必须出现一个组件，当我选择第二个选项时，另一个组件。

我试过这个功能但没有工作

pickerOptionText = () => {
  if (this.state.PickerValueHolder==this.state.filter[0]) {
    return (
      <Text>{instructions[2]}</Text>
    );
  }else {
    return (
      <Text>{instructions[1]}</Text>
    );
  }
  return null;
}

这是我的代码

export default class Facil extends Component {

   constructor(props)
   {
     super(props);
     this.state = {
     isLoading: true,
     PickerValueHolder : '',
     filter: [
       {
         "option":"Palabras por categoria"
       },
       {
         "option":"Palabras por caracteres"
       }
     ],
     dataSource:[]
    }
   }
   componentDidMount() {

        return fetch(API_URL)
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({
              isLoading: false,
              dataSource: responseJson
            })
          })
          .catch((error) => {
            console.error(error);
          });
      }

  render() {
    const resizeMode = 'stretch';


pickerOptionText = () => {
  if (this.state.PickerValueHolder==this.state.filter[0]) {
    return (
      <Text>{instructions[2]}</Text>
    );
  }else {
    return (
      <Text>{instructions[1]}</Text>
    );
  }
  return null;
}



    return (
      <View style={styles.container}>
        <Image source={require('../../Images/HomeLayout.png')}
          style={styles.imagen}
        />
      <View style={styles.mView}>
        <View style={styles.panel}>
          <Text style={styles.titlePanel}>MODO FACIL</Text>
          <Text style={styles.instructions}>{instructions[0]}</Text>
          <View style={styles.picker}>
          <Picker
            selectedValue={this.state.PickerValueHolder}
            style={ {height: '100%',width: '100%'}}
            mode="dropdown"
            onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
            { this.state.filter.map((item, key)=>(
              <Picker.Item label={item.option} value={item.option} key={key} />)
              )}
            </Picker>
          </View>

          <View style={styles.gameOpt}>
            <Text>[dynamic options]</Text>
            {pickerOptionText}
          </View>

        </View>
      </View>
      <TouchableOpacity style={styles.button}><Text style={styles.btnText}>Play!</Text></TouchableOpacity>
      </View>
    );
  }
}

Answer 1

你忘了'（）'。 pickerOptionText是一个函数，而不是React组件。

<Text>[dynamic options]</Text>
{pickerOptionText}

为：

<Text>[dynamic options]</Text>
{pickerOptionText()}

Answer 2

您可以尝试使用JSX的条件渲染，这样您就可以使用三元运算符和简单的if条件。这写成：

{this.state.PickerValueHolder==this.state.filter[0] ? 
<Text>{instructions[2]}</Text>
:<Text>{instructions[1]}</Text>
}

如果你需要简单的if条件，那么

{ condition == true && <Text>your text here</Text>
}

如何根据选择的选择器值显示组件？ [反应原生]

这是我的代码

2 个答案: