javascript - React Native 从另一个组件运行子引用方法

Question

我正在尝试运行另一个组件的组件方法。我正在尝试使用 react 引用。我也在关注这个链接: https://medium.freecodecamp.org/react-changing-state-of-child-component-from-parent-8ab547436271但我的结构有点复杂。

列表.js

class List extends Component {

    constructor(){
        super()
        this.LoadCounterElement = React.createRef()
    }

    render(){
        return(
            <View>
                <ItemGenerator />
                <LoadCounter ref={this.LoadCounterElement}/>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter.counter
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(List);

ItemGenerator.js

class ItemGenerator extends Component {

    render() {
        return (
            <ScrollView>
                {
                    this.state.data.map((item, index) => {
                        return(<ItemList navigate={this.props.navigate} data={item} key={index}/>)
                    })
                }
            </ScrollView>
        )
    }

}

LoadCounter.js

class LoadCounter extends Component {

    constructor(props) {
        super(props)
        this.state = {
            count : 0,
        }
    }

    componentDidMount() {
        this._renderCount()
    }

    _renderCount = () => {
        this.setState({count:this.props.counter})
    }

    render(){
        return(
            <View>
                <Text>{this.state.count}</Text>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter.counter
    }
}

export default connect(mapStateToProps)(withNavigation(LoadCounter));

ItemList.js

class ItemList extends Component {
    render() {
        return(
            <View>
                <TouchableOpacity onPress={() => {
                    this.props.increaseCounter()
                    this.LoadCounterElement.current._renderCount()
                }}>
                    <Card containerStyle={{margin: 0}}>
                        <View style={{flex:1, flexDirection:'row', height:70, alignItems:'center', justifyContent:'space-between'}}>
                            <View style={{flexDirection:'row', alignItems:'center', width:'55%'}}>
                                <View style={{flexDirection:'column', marginLeft:10}}>
                                    <Text style={{...}}>{this.props.data.name}</Text>
                                </View>
                            </View>
                        </View>
                    </Card>
                </TouchableOpacity>
            </View>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(ItemList);

counterReducer.js

const initialState = {
    counter: 1
}
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return { counter: state.counter + 1 }
        case 'DECREASE_COUNTER':
            return { counter: state.counter - 1 }
    }
    return state
}

export default counterReducer;

正如您在 ItemLiist 组件中看到的，我正在尝试运行组件 LoadCounter 中的 _renderCount 方法。但它不起作用。请指导我缺少什么？

Answer 1

这里的问题是子组件中有一些数据应该反射(reflect)在父组件中。我建议您将共享状态移至父组件或 reducer 状态。

奇怪的是，您使用操作创建器来递增/递减计数 - 我认为这会更新某些 reducer 状态。如果是这种情况，为什么还要将该状态再次存储在本地组件状态中？您可以从父组件中的 reducer 中读取计数器状态。

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <div>
        <span>{this.props.count}</span>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.yourCountReducer.count,
});

export default connect(mapStateToProps)(Parent);

Child.js

class Child extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.increaseCounter()}>+</button>
        <button onClick={() => this.props.decreaseCounter()}>-</button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
  decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
});

export default connect(null, mapDispatchToProps)(Child);

这样，当子组件更新计数时，父组件将显示更新的计数器状态。从您的示例代码中，我不确定是否有任何充分的理由在任何组件的本地状态中存储共享 reducer 状态。