Question

开始做我的第一个反应本机组件。我正在尝试构建一个组件来反转传递给它的字符串。当我给它一个硬编码的字符串时，它工作得非常好，但当我从一个＆＃34; TextInput＆＃34;传递一个字符串时，它似乎做了什么。零件。

以下是我认为相关的代码。

class ReverseText extends Component {
constructor(props) {
    super(props);
    this.state = {text: props.src};
}

reverseString = (str) =>{
    let newString = "";
    for (let i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
};

render() {
    let display = this.reverseString(this.state.text);
    return (
        <Text>{display}</Text>
    );
}
}

export default class PizzaTranslator extends Component {
constructor(props) {
    super(props);
    this.state = {text: ''};
}

render() {
    return (
        <View style={{padding: 10}}>
            <TextInput
                style={{height: 40}}
                placeholder="Type here to translate2!"
                onChangeText={(text) => this.setState({text})}/>
            <Text style={{padding: 10, fontSize: 42}}>
                {/*{this.state.text.split(' ').map((word) => word && '').join(' ')}*/}
                {this.state.text} /* this works */
            </Text>
            <ReverseText src="123" /> /* this works */
            <ReverseText src={this.state.text} /> /* this dosen't works */
        </View>
    );
}
}

为什么组件在传递硬编码字符串时会起作用，但是当我传递一个从TextInput获取的字符串时它会失败？

Answer 1

ReverseText类只是在第一次设置状态时接收 this.props.src 。所以，当你改变 this.props 时，什么都没发生。

要修复你可以这样做：

export default class ReverseText extends Component{
    constructor(props) {
        super(props);
        this.state = {reverseText: ''};
    }

    componentWillReceiveProps(nextProps){
        this.setState({reverseText: this.reverseString(nextProps.src)})
    }

    reverseString = (str) =>{
        let newString = "";
        for (let i = str.length - 1; i >= 0; i--) {
            newString += str[i];
        }
        return newString;
    };

    render() {
        return (
                <Text>{this.state.reverseText}</Text>
        );
    }
  }

自定义反应组件的问题

1 个答案: