Question

所以我制作了一个淡入淡出的文本组件，它只是一个带有过渡不透明度css和可见性状态的标题，因此我可以使文本淡入淡出。我有很多这些淡化文本对象，所以我简化了制作淡化文本组组件的东西。我希望使用在props中传递的字符串数组来创建组，为此我需要使用map函数来创建一堆这些淡化文本，但我无法使用computed属性访问创建的状态。

this.setState({
        fadeTexts: this.props.values.map((buttonText, index) => {
            this.setState({ ["fade" + index]: false });
            <FadeInText value={buttonText} visible={this.state.["fade" + index]} />
        }).bind(this)
    });

如何使用computed属性设置和访问状态？

Answer 1

如果我理解正确，你可能更好的是在状态中只有一个布尔值来控制所有按钮的可见性：

render() {
  return this.props.values.map(buttonText => 
    <FadeInText key={buttonText} value={buttonText} visible={this.state.fadeTextVisible} />
  );
}

然后在按钮点击处理程序中切换state.fadeTextVisible：

handleButtonClick() {
  this.setState({ fadeTextVisible: !this.state.fadeTextVisible });
}

如果您需要单独控制每段文本的可见性，请在州内使用数组。

如何使用react js computed属性来访问状态？

1 个答案: