0

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

到目前为止，上述应用程序做了什么

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

目标

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}

现在，问题是，我无法 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>

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

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

4

1 回答 1

0

为什么不制作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;
于 2021-06-17T08:00:00.227 回答