Question

我正在学习通过教程在父组件和子组件之间传递数据。我仔细检查了我的代码，仍然无法弄清楚错误。

我的 index.js

import React, {Component} from 'react';
import ReactDom from 'react-dom';
import {Header} from './components/Header';
import {Home} from './components/Home';

class App extends Component {
  constructor(){
    super();
    this.state ={
      HomeLink:"home"
    };
  }
  onGreet(){
    alert("hello");
  }

  onChangeLinkName(newName){
    this.setState({
      HomeLink:newName
    });
  }
  render(){
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-10 col-xs-offset-1">
            <Header HomeLink={this.state.HomeLink} />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-10 col-xs-offset-1">
            <Home
            name={"max"}
             initialAge={27}
             greet={this.onGreet}>
             changeLink={this.onChangeLinkName.bind(this)}
              <p>This is a paragraph passed from props</p>
            </Home>
          </div>
        </div>
      </div>
    );
  }
}
ReactDom.render(
  <App/>, window.document.getElementById("root")
);

Home.js

按钮更改链接onClick事件正在调用changeLink函数，该函数将newlink传递给props。

import React from 'react';

export class Home extends React.Component {
  constructor(props){
    super();
    this.state = {
      age:props.initialAge,
      status:0,
      homeLink:"changed link"
    };
    setTimeout(() => {
      this.setState({
        status:1
        });
    },3000);
  }
  onMakeOlder(){
    this.setState({
      age:this.state.age+3
    });
  }
  onChangeLink(){
    this.props.changeLink(this.state.homeLink);
  }

  render(){
    return(
      <div>
        <p>In a new Component</p>
        <p>Your name is {this.props.name} and your age is {this.state.age}</p>
        <p>{this.state.status}</p>
        <hr/>
        <button onClick={()=> this.onMakeOlder()}>make me older</button>
        <hr/>
        <button onClick={this.props.greet}>greet</button>
        <hr/>
        <button onClick={this.onChangeLink.bind(this)}>change link</button>
      </div>
    );
  }
}

Home.propTypes = {
  name:React.PropTypes.string,
  age:React.PropTypes.number,
  user:React.PropTypes.object,
  children: React.PropTypes.element.isRequired,
  greet:React.PropTypes.func,
  changeLink:React.PropTypes.func
};

错误： -

Uncaught TypeError: this.props.changeLink is not a function

Answer 1

代码中有拼写错误。

<Home
  name={"max"}
  initialAge={27}
  greet={this.onGreet}>
  changeLink={this.onChangeLinkName.bind(this)}
    <p>This is a paragraph passed from props</p>            
</Home>

注意在使用此字符Home设置属性greet之后，如何关闭>组件。您希望在将changeLink设置为道具后将其关闭，以便将>移至this.onChangeLinkName.bind(this)}之后

这将解决您的错误，您应该能够继续前进。

Answer 2

切换你传给的道具：

changeLink={this.onChangeLinkName}

并在父母的构造函数中：

this.onChangeLinkName = this.onChangeLinkName.bind(this);

最后，在你的按钮通话中：

<button onClick={this.props.changeLink(this.state.homeLink)}>change link</button>

如何在父组件和子组件之间传递数据

2 个答案: