Question

这可行，但是我需要分离出string characters = String .Join( "", str .Split('-') .Select(x => new { head = x.Substring(0, 1), tail = x.Substring(1, 2), }) .Select(x => new { head = int.Parse(x.head), tail = int.Parse(x.tail, System.Globalization.NumberStyles.HexNumber), }) .Select(x => x.head ^ x.tail) .Select(x => (char)x));组件。

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;。如果我单击“ no.3”，它将正确记录“ x：6”

App.js

现在，如果我必须按如下所述分离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中的一个组件，我无法覆盖库代码。还有其他方法吗？

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

将道具传递给子功能组件

2 个答案: