传递道具的功能作为子组件

Question

这工作，但我需要分离出cellRenderer组件。

// Grid.js
import React, { Component } from "react";

class Grid extends Component {
  render() {
    const index = 3;
    return (
      <div style={{ height: "5em", width: "6em", border: "1px solid black" }}>
        {this.props.text}
        {this.props.children({ index, cellText: "no." })}
      </div>
    );
  }
}

export default Grid;

和App.js。如果我点击“三号”，它正确地记录“×6”

import React, { Component } from "react";
import Grid from "./Grid";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 5
    };
  }

  handleIncrement = () => {
    this.setState(
      state => ({ x: state.x + 1 }),
      () => console.log(`x: ${this.state.x}`)
    );
  };

  cellRenderer = ({ index, cellText }) => {
    return <div onClick={() => this.handleIncrement()}>{cellText + index}</div>;
  };

  render() {
    return (
      <div className="App">
        <Grid text={"Hello "}>{this.cellRenderer}</Grid>
      </div>
    );
  }
}

export default App;

现在，如果我有如下分离出cellRenderer组件，我怎么能传递handleIncrement功能呢？

import React, { Component } from "react";
import Grid from "./Grid";

const cellRenderer = ({ index, cellText }) => {
  return <div>{cellText + index}</div>;
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 5
    };
  }

  handleIncrement = () => {
    this.setState(
      state => ({ x: state.x + 1 }),
      () => console.log(`x: ${this.state.x}`)
    );
  };

  render() {
    return (
      <div className="App">
        <Grid text={"Hello "}>{cellRenderer}</Grid>
      </div>
    );
  }
}

编辑：

这工作：

// pass handleIncrement to Grid
<Grid text={"Hello "} handleIncrement={this.handleIncrement} >{cellRenderer}</Grid>

// And within Grid, pass it to cellRenderer
{this.props.children({ index, cellText: "no.", handleIncrement: this.props.handleIncrement })}

// Update cellRenderer to this
const cellRenderer = ({ index, cellText, handleIncrement }) => {
    return <div onClick={handleIncrement}>{cellText + index}</div>;
};

但问题是，Grid是从库react-window一个组成部分，我不能覆盖库代码。任何其他可能的方式？

Answer 1

你已经分居我们cellRenderer作为一个功能组件的事实，你可以使其作为一个组件，并通过在道具

const CellRenderer = ({ index, cellText, handleIncrement }) => {
  return <div onClick={handleIncrement}>{cellText + index}</div>;
};
...

return (
      <div className="App">
        <Grid text={"Hello "}>{({index, cellText}) => <CellRenderer handleIncrement={this.handleIncrement} index={index} cellText={cellText}/>}</Grid>
      </div>
    );

Answer 2

这将工作：

import React, { Component } from 'react'
import Grid from './components/Grid'

const CellRenderer = ({ index, cellText, handleIncrement }) => {
  return <div onClick={handleIncrement}>{cellText + index}</div>
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 5
    }
  }

  handleIncrement = () => {
    this.setState(
      state => ({ x: state.x + 1 }),
      () => console.log(`x: ${this.state.x}`)
    )
  }

  render() {
    return (
      <div className="App">
        <Grid text={'Hello '}>
          {props => (
            <CellRenderer {...props} handleIncrement={this.handleIncrement} />
          )}
        </Grid>
      </div>
    )
  }
}

export default App