切換折疊時反應本機向下箭頭或向右箭頭-有解無憂

我只希望我選擇的常見問題切換箭頭向右將更改為向下箭頭。但是現在我的代碼將在切換呼叫時將我的所有常見問題解答箭頭從右向下更改。

這是我的代碼：

const renderItem = ({ item }, open, show) => {         
    return (        
        <View style={styles.container}>                             
            <Collapse onToggle={() => show()}>                
                <CollapseHeader>     
                    <View style={styles.section}>
                        <Text style={styles.question}>{item.question}</Text>     
                        {open ? <AntDesign name="down" size={15} color="gray" /> : <AntDesign name="right" size={15} color="gray" />}                        
                    </View>                    
                </CollapseHeader>                                                                           
                <CollapseBody>                          
                    <Text style={styles.answer}>{item.answer}</Text>                                            
                </CollapseBody>
            </Collapse>                                   
        </View>
    );
};


const FAQComponent = () => {
    console.log('FAQComponent');    
    const [open, setOpen] = useState(false);    
    const show = () => {                           
        setOpen(!open);              
    }

    return (
        <FlatList
            data={Object.values(FAQData)}                
            renderItem={(item) => renderItem(item, open, show)}
            keyExtractor={item => item.id}                
            initialNumToRender={10}            
        />       
    );
};

這是默認布局向右箭頭：

切換折疊時反應本機向下箭頭或向右箭頭

這是常見問題解答之一崩潰的時候：

切換折疊時反應本機向下箭頭或向右箭頭

當折疊箭頭變為向下而其他保持不變時，如何僅制作選定的常見問題解答？

謝謝。

uj5u.com熱心網友回復：

const renderItem = (item, seletecdItem, show, index) => {
  // Instead of Passing a Boolean pass a SelectedItem which holds the index of current selected index and verify it with that
  return (
    <View style={styles.container}>
      <Collapse onToggle={() => show(index)}>
        <CollapseHeader>
          <View style={styles.section}>
            <Text style={styles.question}>{item.question}</Text>
            {seletecdItem === index ? (
              <AntDesign name="down" size={15} color="gray" />
            ) : (
              <AntDesign name="right" size={15} color="gray" />
            )}
          </View>
        </CollapseHeader>
        <CollapseBody>
          <Text style={styles.answer}>{item.answer}</Text>
        </CollapseBody>
      </Collapse>
    </View>
  );
};

const FAQComponent = () => {
  console.log('FAQComponent');
  const [selectedItem, setSelectedItem] = useState(-1); // Change the useState to use number
  const show = (index) => { // Pass Index through the callback and update the state
    setSelectedItem(index);
  };

  return (
    <FlatList
      data={Object.values(FAQData)}
      renderItem={{ item,index } => renderItem(item, selectedItem, show, index)} // Pass the Index along with renderItem
      keyExtractor={item => item.id}
      initialNumToRender={10}
    />
  );
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/436929.html

標籤：反应反应式反应本机平面列表

上一篇：我怎樣才能在反應原生的功能組件中寫這個

下一篇：ReactNative主組件渲染耗時5秒