从另一个组件到达在组件内声明的对象 - React Native

如何解决从另一个组件到达在组件内声明的对象 - React Native

我正在构建一个小型语法应用程序。我在这里简化了它，在 snacks

以上应用目前做了什么

该应用会根据我们选择的冠词和名词性别来获取和打印例句。

目标

我的目的是，只要选择一种单词（物品或名词），要点亮所选择的单词类型的颜色。（例如，如果选择定冠词，在例句中将'The'设为黄色几秒钟）。然后将冠词/名词恢复为黑色，就像句子的其余部分一样。

我的尝试

我已经在单独的文件中声明了 animatedTextColor 变量

//TextColorAnimation.js
...
let animatedTextColor = textColor.interpolate({
        inputRange: [0,1],outputRange: ["rgb(170,188,16)","rgb(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}

现在，问题是，我无法从 SampleSentencesEnglish

中的另一个组件访问一个组件内的 MainApp.js 对象

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

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

Here 是一个不工作的版本。与第一个链接相比，它有 TextColorAnimation.js 和 TextColorRedux.js 文件作为额外内容，并且在 SampleSentences.js 中有模块。

感谢阅读。希望可以理解。

解决方法

为什么不让 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;