javascript - React-Native:如何将组件中的项目与另一个组件中的项目绑定(bind)？

Question

我正在尝试使用 react-native-calendars library by wix 构建日历。例如，当我在日历组件中单击2018年12月5日时，它应该导航到议程组件上的2018年12月5日。这就是我正在努力做的事情。

这是我的日历组件代码，我试图在其中获取ID并绑定(bind)它:

    class Calendar extends Component {
    constructor(props) {
        super(props);
         this.state = {
             active: 'true'
         }
    }

    render() { 
        const {onSelect} = this.props;
        return ( 
            <View>
                <CalendarList 
                    keyExtractor = {day=>day.id}
                    onDayPress={(day) => {onSelect.bind(this, day)}}
                    pastScrollRange={12}
                    futureScrollRange={12}
                    scrollEnabled={true}
                    showScrollIndicator={true}
                />
            </View>
         );
    }
}

Calendar.propTypes = {
    onSelect: PropTypes.func,
}

这是我的代码CalendarScreen，我在其中进行导航。

const CalendarScreen = ({navigation}) => (
    <View >
        <Calendar  navigation={navigation} 
            onSelect={(id)=>{
            navigation.navigate('Agenda', {id}) }}>
            <StatusBar backgroundColor="#28F1A6" />
        </Calendar >
    </View>
);

Calendar.propTypes = {
    navigation: PropTypes.object.isRequired
}

export default CalendarScreen;

我也提到了解决方案here 。但运气不好。

编辑:

这是我的议程组件

    class WeeklyAgenda extends Component {
    constructor(props) {
    super(props);
    this.state = {
      items: {}
    };
  }

  render() {
    return (
        <View style={{height:600}}>
             <Agenda
                items={this.state.items}
                loadItemsForMonth={this.loadItems.bind(this)}
                selected={Date()}
                renderItem={this.renderItem.bind(this)}
                renderEmptyDate={this.renderEmptyDate.bind(this)}
                rowHasChanged={this.rowHasChanged.bind(this)}
                onRefresh = {() => { this.setState({refeshing : true})}}
                refreshing = {this.state.refreshing}
                refreshControl = {null}
                pastScrollRange={1}
                futureScrollRange = {3}
            />
    );
  }

这是AgendaScreen

    const AgendaScreen = ({navigation}) => (
    <View style={{height: 100}}>
        <WeeklyAgenda  navigation={navigation}>
            <StatusBar backgroundColor="#28F1A6" />
        </WeeklyAgenda >
    </View>
);

WeeklyAgenda.propTypes = {
    navigation: PropTypes.object.isRequired
}

export default AgendaScreen;

Answer 1

Calender 向 CalenderScreen 传递 onSelect(id) 回调。

日历屏幕只需要调用onSelect(day)。

onDayPress={(day) => {onSelect(day)}}

或者让回调接受导航对象和日期

onDayPress={(day) => {onSelect(day, navigation)}}

现在应该设置日历

onSelect={(day, navigation)=>{
        navigation.navigate('Agenda', {day}) }}>

或者当您将导航对象传递给日历时为什么要传递回调

onDayPress={(day) => {this.props.navigation.navigate('Agenda', {day})}}

编辑:新类(class)，并将 id 更改为 day

同样的问题。 onSelect 导航到 AgentScreen 并向其传递 navigation prop(其中包含 day 对象)，然后 AgentScreen 将 navigation prop 传递给 WeeklyAgent，但 WeeklyAgent 不使用 navigation prop 来获取 id。

selected={Date()}

使用今天的日期创建一个新的日期对象。要获得正确的日期，您需要从导航中获取日期，通常类似于

this.props.navigation.state.params["day"]

返回通过的日期。

现在，如果 WeeklyAgenda 实际上没有进一步使用导航，我就不会通过它。

相反，每周议程应该有一个 Prop “天”，所以而不是

 <WeeklyAgenda  navigation={navigation}>

尝试

const { params } = this.props.navigation.state;
...
<WeeklyAgenda  day={params["day"}>

第一行将 params 对象从状态解压到一个名为 params 的变量中。

WeeklyAgenda 现在就可以了

selected={this.props.day}

我认为这里的问题根本不是绑定(bind)。我建议阅读此article或另一个关于绑定(bind)的作用的内容。