從另一個組件到達在組件內聲明的對象 - React Native

Question

我正在構建一個小型語法應用程序。 我在這里簡化了，在小吃

到目前為止，上面的應用程序做了什么

該應用程序根據我們對文章和名詞性別的選擇來獲取和打印示例句子。

目標

My aim is, whenever a type of word is chosen (article or noun), to light up the color of the type of word chosen. （例如，如果選擇定冠詞，則將示例句子中的'The'設為黃色幾秒鍾）。 然后像句子的其余部分一樣將冠詞/名詞恢復為黑色。

我的嘗試

我已經在一個單獨的文件中聲明了animatedTextColor變量

//TextColorAnimation.js
...
let animatedTextColor = textColor.interpolate({
        inputRange: [0, 1],
        outputRange: ["rgb(170, 188, 16)", "rgb(0,0,0)"]
    })
    //sending to redux store
    dispatch(setTextColorAC(animatedTextColor))
...

用於SampleSentencesEnglish對象的樣式。

//SampleSentences.js
const styles = StyleSheet.create({
  article: {
    color: animatedTextColor
  }
})
const SampleSentencesEnglish = {
 'masculine': {
   'indefinite': <Text>
                  <Text style={styles.article}>A </Text>
                  <Text>man </Text>
                  was looking for you
                 </Text>,
...

我已經將styles和SampleSentencesEnglish包裹在一個組件中以便能夠使用useSelector

//SampleSentences.js
...
const SampleSentences = (props) => {

            const animatedTextColor= useSelector(textColorSelector);

            const styles = StyleSheet.create({
                    article: {
                        color: animatedTextColor
                  }
            })
                    
            const SampleSentencesEnglish = {
              'masculine': {
                'indefinite': <Text>
                                <Text style={styles.article}>A </Text>
                                <Text>man </Text>
                                was looking for you
                              </Text>,
...
}

export {SampleSentences}

現在，問題是，我無法從MainApp.js另一個組件訪問組件內的SampleSentencesEnglish對象

  //MainApp.js
  ...
  import {SampleSentences} from './Examples/SampleSentences';
  ...
   <View>
      ...
       <Text>Sample Sentence</Text>

       //Invoking object fails
       <Text>{SampleSentences.SampleSentencesEnglish[currentNounType][currentArticleType]}         
      </Text>
  </View>     

這是一個不起作用的版本。 與第一個鏈接相比，它有TextColorAnimation.js和TextColorRedux.js文件作為額外內容，並且在SampleSentences.js有模塊。

謝謝閱讀。 希望這是可以理解的。

Answer 1

為什么不制作SampleSentencesEnglish它自己的組件，並通過這些數據，您需要從它MainApp在組件props 。

就像是：

// in MainApp component
... useSelector
... useState
...
render() {
    return (
        ...
        <SampleSentencesEnglish
          currentNounType={currentNounType}
          currentArticleType={currentArticleType}
          styles: {styles}
        />
        ...
    );
}

而在SampleSentencesEnglish可能是這樣的：

const SampleSentencesEnglish = props => {

  const englishSamples = {
    'masculine': {
      'indefinite': <Text>
                     <Text style={props.styles.article}>A</Text>
                     <Text>...</Text>
                    </Text>,
      'definite': <Text>...</Text>,
    },
    ...
  }

  return (
    ...
    {englishSamples[props.currentNounType][props.currentArticleType]}
    ...
  )

}

export default SampleSentencesEnglish;