web-dev-qa-db-fra.com

React Passer la fonction au composant enfant

Je veux passer une fonction à un composant enfant mais j'obtiens cette erreur.

Invalid value for prop passedFunction on <div> tag.

class Parent extends Component {
    passedFunction(){}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

Fondamentalement, ce que j'essaie de faire.

var ReactGridLayout = require ('react-grid-layout');

var MyFirstGrid = React.createClass({
passedFunction:function(){}
  render: function () {
    return (
      <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}} passedFunction={this.passedFunction}>c</div>
      </ReactGridLayout>
    )
  }
});

Il semble qu'il ait été introduit dans React v16. Par conséquent, quelle est la bonne façon de passer une fonction du parent à l'enfant?

reactjsreact-grid-layout
7
Lun Zhang

J'ai découvert ce qui n'allait pas. C'était à cause de la mise en page de la grille de réaction. Je dois transmettre le reste des propriétés à l'enfant.

class Child extends Component {
    render() {
        var { passedFunction, ...otherProps } = this.props;
        return (
            <div onClick={passedFunction} {...otherProps}></div>
        );           
    }
}
0
Lun Zhang

Au lieu d'avoir à lier votre fonction dans le constructeur de la classe parent, vous pouvez utiliser une fonction de flèche pour définir votre méthode afin qu'elle soit liée lexicalement à l'aide d'une fonction de flèche

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

Pour tenir compte de la prise en charge des anciennes versions de Javascript:

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    constructor() {
        this.passedFunction = this.passedFunction.bind(this)
    }

    passedFunction() {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}
16
Benjamin Charais

Il manque la liaison sur le composant enfant.

this.props.passedFunction.bind(this)
5
Ynahmany

Si vous pouvez lier cette fonction comme ceci, cela fonctionnera

class Parent extends Component {
   passedFunction = () => {};
   render() {
   <Child passedFunction={this.passedFunction} />;
  }
}

class Child extends Component {
   render() {
   <div onClick={this.props.passedFunction} />;
  }
}
0
Rajesh Bhartia