Question

我有一个函数，我得到currentMonth和date，方法返回如下。

getDayMonth() {
return {
currentMonth: new Date().getMonth(),
currentDate: new Date().getDate()
  }
 }

父render（）是一个容器，因此它应该显示子组件。

在我的子组件中，我正在尝试检查当前日期和月份以加载特定的图像文件，如下所示

render() {
      return (

        <div className="childclass">
            {(this.props.currentMonth === 11 && this.props.currentDate >= 14 
                  && this.props.currentDate < 28) ?
                <img className="santa" src="../../img/spinny-santa.gif" /> : 
          <div className="progress-circle progress-indeterminate" />}

           </div>

           ) }

我已经尝试了很多方法来访问currentDate / month。但是，它显示未定义的值。

有些人可以指导我，因为我是reactjs的初学者吗？

Answer 1

首先，我建议将功能分解为两个单独的功能。在您的父组件中，您呼叫您的孩子，将日期作为道具传递。

export default class ParentComp extends React.Component {


<ChildContainer getDate={this.getDate} getMonth={this.getMonth} />

}

然后，从您的子容器，您可以使用这样的当前日期。

{this.props.getDate().bind(this)}

以下是我将代码传递给子代码的代码示例，然后从子代表调用所述函数来更新父代，它来自... ...

来自父母

constructor(props) {
    super(props);
    this.state = {
        nickname: '', make: '', model: '', vehicleYear: '', vehicleMake: '', vehicleModel: '', toggleVehicleMake: false,
    }
    this.yearPicked = this.yearPicked.bind(this);
    this.makePicked = this.makePicked.bind(this);
    this.modelPicked = this.modelPicked.bind(this);
}

modelPicked(model) {
    this.setState({ vehicleModel: model }, function () {
        console.log(this.state, 'Updated Make')
    });
}

<VehicleModelPicker homeState={this.state} vehicleModel={this.modelPicked} />

来自孩子

<Button block onPress={() => this.props.vehicleModel(this.state.selectedModel)}>
                            <Text>Done</Text>
                        </Button>

Answer 2

您的基础课程可能如下所示。

 import React from 'react';  
 import Child from './Child'

 class App extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.getDayMonth = this.getDayMonth.bind(this);
  }

  getDayMonth() {
   return {
   currentMonth: new Date().getMonth(),
   currentDate: new Date().getDate()
   }
 }
 render(){
    return(
    <div>
    <Child getDayMonth={this.getDayMonth} />
    </div>
    )
 }
 }

然后孩子看起来像这样。注意getDayMonth函数如何绑定到＆＃34;这个＆＃34;在构造函数中并作为参数/ props传递给子。然后可以在子项的props上访问getDayMonth函数。但是......这只是一种模式，这就是为什么其他人在问你如何将这个功能传递给孩子的原因。

 const Child = (props) =>{
 render() {
  return (
    <div className="childclass">
        {(props.getDayMonth.currentMonth === 11 && 
          props.getDayMonth.currentDate >= 14 
              && props.getDayMonth.currentDate < 28) ?
            <img className="santa" src="../../img/spinny-santa.gif" /> : 
      <div className="progress-circle progress-indeterminate" />}

       </div>

       ) }

  }

如何将parent中函数的返回值传递给reactjs中的子组件？

2 个答案: