Question

我正在尝试创建一个简单的标记功能。用户输入一个单词，提交后，文本会淡入另一个组件内部。当前，我将所有文本输入值发送到状态数组，然后每当将新值添加到数组时重新渲染数组项。

问题：

每当一个新标签淡入淡出时，动画的淡入淡出发生在每个标签上，并且随着我不断键入动画会循环播放。

我想发生的事情：

每个标签都会淡入一次并保持可见。

到目前为止，这是我的代码：

州

 state = {
    allTags: []
  };

组件

    class Tags extends React.Component {
      fadeIn = new Animated.Value(0);

      fadeInTag = () => {
        this.fadeIn.setValue(0);
        Animated.timing(this.fadeIn, {
          toValue: 1,
          duration: 600
        }).start();
      };

      render() {
        const animationStyles = {
          opacity: this.fadeIn
        };

        return (
          <View>
            {this.props.allTags.map(function(tag, i) {
              return (
                <Animated.Text
                  key={i}
                  style={[animationStyles, tagStyles.fadeStyle]}
                >
                  {tag}
                </Animated.Text>
              );
            }, this.fadeInTag())}
          </View>
        );
      }
    }

任何帮助将不胜感激。谢谢！

Answer 1

问题是您的$(document).ready(function(){ $('#bookid').keyup(function(){ $.ajax({ url : 'retrieve.jsp', type : 'POST', async : 'false', data : { bid : $('#bookid').val() }, success : function(responseText){ $('#dispArea').html(responseText); } }); }); });每次为Tags setState时都会重新渲染。您应该将tags移到单独的组件，并使用Animated.Text或PureComponent来防止重新渲染更改道具。

shouldComponentUpdate

提供了一个示例here

（反应本机）仅淡入文本组件一次

1 个答案: