将道具作为子组件传递给函数

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。如果我点击 "no.3"，它会正确记录 "x: 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 分离为一个功能组件，您可以将其渲染为一个组件并传递 props

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

将道具作为子组件传递给函数

Passing props to a Function as a Child component

reactjs

react-virtualized