不确定如何在这里实现条件渲染(react-native)

阿努什卡

我这里有这个 Barchart 渲染组件

    const BarCharts = () => {
    const fill = 'rgb(134, 65, 244)'
    const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
    return (
      <View style={styles.sectionContainer}>
        <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
          <Grid />
        </BarChart>
      </View>
    );
  };

我必须使用这个组件来绘制另一个组件内的条形图。我想在以下组件的 if 中使用 Barcharts 组件:

            <SearchableDropdown
            onItemSelect={(item) => {
              if (item.type =='1') {
                //alert(item.type);
                return <BarCharts />
              }
              if (item.type =='2') {
                alert(item.type);
              }
            }}

目前,条件 if 中的“返回”没有返回任何内容。单击 item1 时,将返回 BarCharts

诺鲁丁·拉卡尼

你可以尝试类似的东西

function Example() {

  const [showChart, setShowChart] = useState(false); // Default bar chart won't be display

  return (
    <View>
      <SearchableDropdown
            onItemSelect={(item) => {
              if (item.type =='1') {
                 setShowChart(true); // Chart will be display here when state changes
              }
              if (item.type =='2') {
                alert(item.type);
              }
            }}
    />
    {showChart && <BarCharts /> }
    </View>
  );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章