Question

我有2个组件。我们称他们为parent component和child component。因此，在父组件中，我按如下方式映射一组对象。

<ScrollView style={[styles.container]}>

                    {userFriendsList.length > 0
                    && userFriendsList.map(reviewer => (

                        <Child reviewer={reviewer} key={reviewer.id}
                                        addToArray={this.addToArray.bind(this)}
                                        removeFromArray={this.removeFromArray.bind(this)}/>
                    ))}

</ScrollView>

以下是我的孩子组件

class Child extends Component {

    constructor() {

        super();

        this.state = {

            added: false

        }

    }

    //Send data to parent component
    handleSendingData(reviewer) {

        this.setState({
            added: !this.state.added
        }, () => {
            if (this.state.added === true) {
                this.props.addToArray(data)
            } else {

                this.props.removeFromArray(data.reviewerId)

            }
        });

        const data = {
            reviewerId: reviewer.id,
            reviewerName: reviewer.name,
            reviewerImage: reviewer.url
        };


    }


    render() {

        const {reviewer} = this.props;

        return (
            <TouchableOpacity style={styles.addtogroupcard} onPress={() => this.handleSendingData(reviewer)}>
                <Image source={{uri: `${imageEnv}${reviewer.url}`}} style={styles.friendimg}/>
                <Text style={styles.friendname}>{reviewer.name}</Text>
                {this.state.added ? <Icon name="ios-checkmark-outline" style={styles.friendaddicon}/> :
                    <Icon name="ios-add-circle-outline" style={styles.friendaddicon}/>
                }

            </TouchableOpacity>
        );
    }

}

正如您所看到的，我在子组件中进行状态更改，以根据状态显示不同的图标。

{this.state.added ? <Icon name="ios-checkmark-outline" style={styles.friendaddicon}/> :
                    <Icon name="ios-add-circle-outline" style={styles.friendaddicon}/>
}

如何从父组件进行此状态更改？在这里使用redux是正确的方法吗？

Answer 1

是的Redux将帮助您轻松管理应用程序的整个状态，但您也可以使用react来执行此处所需的操作。如果要调用从父组件设置子组件中的状态的函数。这可以使用ref's进行反应。这是一个例子：

//Parent component
import React from 'react';
import Child from './child.js';

class Parent extends React.Component {
 render() {
    return (
    <div onClick={this.child.func();}>
        <Child ref={instance => { this.child = instance; }}/>
      </div>
    )
  }
}

export default Parent;

子组件：

import React from 'react';

class Child extends React.Component {
    func = () => {
       console.log('child');
     // here you can set state;
    }
    render(){
        return(
            <div>
               child component
            </div>
        )
    }

}

export default Child;

Answer 2

通常，在这样的子/父关系中处理状态管理的最佳方法是让父存储状态。孩子们需要访问的任何状态对象都应该作为道具传递下去。如果孩子需要改变状态，那么将一个函数从父母传递给孩子作为道具。

项目列表的状态管理 - React Native

2 个答案: