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

Question

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

到目前为止上面的应用程序做了什么

该应用程序根据我们选择的文章和名词性别来获取和打印例句。

目标

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'黄色几秒钟）。然后 return 把 article/noun 改成黑色，剩下的句子就是。

我的尝试

我已经在单独的文件中声明了 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}

现在，问题是，我无法从另一个组件到达 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 文件作为额外内容，并且与第一个 link.
相比在 SampleSentences.js 中有模块
感谢阅读。希望可以理解。

Answer 1

为什么不制作 SampleSentencesEnglish 自己的组件并从 props.

中的 MainApp 组件传递你需要的数据呢？

类似于：

// 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;

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

Reaching object that is declared inside a component from another component - React Native

javascript

javascript-objects

reactjs

react-native

react-animations