如何从屏幕中的组件获取道具

Question

大家好，我已经创建了一个星级组件，现在我已经将其添加到我的屏幕中。我现在的问题是如何在屏幕中获取组件返回值，以便在提交时将其发送到服务器。

这是我的组件

export default class StarsRating extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rating: this.props.rating || null,
            temp_rating: null
        }
    }
    rate(rating) {
        this.setState({
            rating: rating,
            temp_rating: rating
        });
    }
    render() {
        // This array will contain our star tags. We will include this
        // array between the view tag.
        let stars = [];
        // Loop 5 times
        for (var i = 1; i <= 5; i++) {
            // Set the icon to filled stars
            let icon = "star-outline";
            // If ratings is lower, set the icon to unfilled stars
            if (this.state.rating >= i && this.state.rating != null) {
                icon = "star";
            }
            // Push the Icon tag in the stars array
            stars.push((
                <TouchableOpacity key={i} onPress={this.rate.bind(this, i)}>
                    <Icon
                        name={icon}
                        size={40}
                        color={colors.yellow}
                    />
                </TouchableOpacity >
            ));
        }
        return (
            <View style={styles.wrapper}>
                {stars}
            </View>
        );
    }
}

在我的屏幕中，我像这样访问它<StarsRating />

Answer 1

最好的选择是将onChanged函数作为道具从屏幕（渲染它的地方）传递给您的组件。

<StarsRating onChanged={(rating) => {
    // yourFunctionWithApiCall(rating)
    // axios.post() directly here 
}} />

在组件StarsRating中，您只需要在rate方法中添加对此函数的调用。

rate(rating) {
    this.setState({
        rating: rating,
        temp_rating: rating
    });
    // when You think that value should be saved to API call function passed with props
   this.props.onChanged(rating);
}

一般来说 - 将此 api 通信函数作为道具传递给您的组件。多亏了这一点，当评级更改后的行为可能不同时，您可以在另一个项目中重用它。