Question

我是React的新手，有时候会对术语感到困惑。我的问题是我正在创建ScrollableList组件，这些组件作为数组道具传递给ScrollableList。然后ScrollableList映射div中的每个组件，这不允许我将props传递给组件，例如'handleChange'。还有其他方法可以做到这一点，我不知道吗？

ScrollableList呈现：

render() {
  const startPosition = this.state.scrollPosition -
    this.props.maxItemsToRender > 0
      ? this.state.scrollPosition - this.props.maxItemsToRender
      : 0

  const endPosition = this.state.scrollPosition +
    this.props.maxItemsToRender >=
    this.props.listItems.length
      ? this.props.listItems.length
      : this.state.scrollPosition + this.props.maxItemsToRender

  return (
    <div className="react-scrollable-list" ref="list" style={this.props.style}>
      <div
        key="list-spacer-top"
        style={{
          height: startPosition * this.props.heightOfItem
        }}
      />
      //Where My Problem Begins
      {this.props.listItems.slice(startPosition, endPosition).map(item => (
        <div handleChange={this.handleChange}
          className="react-scrollable-list-item"
          key={'list-item-' + item.id}>
          {item.content} 
        </div>
      ))}
      <div
        key="list-spacer-bottom"
        style={{
          height: this.props.listItems.length * this.props.heightOfItem -
            endPosition * this.props.heightOfItem
        }}
      />
    </div>
  )
}

{item.content}包含我希望传递道具handleChange={this.handleChange}的组件。有没有办法做到这一点，还是我的设计是问题？

Answer 1

您可以将项目提取到单独的功能

renderItem(item) {
  const Content = item.content;

  return (
    <div 
      handleChange={this.handleChange}
      className="react-scrollable-list-item"
      key={item.id}
    >
      <Content foo="bar" someProp={9} />
    </div>
  );
}

render() {
  const startPosition = this.state.scrollPosition -
    this.props.maxItemsToRender > 0
      ? this.state.scrollPosition - this.props.maxItemsToRender
      : 0

  const endPosition = this.state.scrollPosition +
    this.props.maxItemsToRender >=
    this.props.listItems.length
      ? this.props.listItems.length
      : this.state.scrollPosition + this.props.maxItemsToRender

  return (
    <div className="react-scrollable-list" ref="list" style={this.props.style}>
      <div
        key="list-spacer-top"
        style={{
          height: startPosition * this.props.heightOfItem
        }}
      />
      //Where My Problem Begins
      {this.props.listItems.slice(startPosition, endPosition).map(item => this.renderItem(item))}
      <div
        key="list-spacer-bottom"
        style={{
          height: this.props.listItems.length * this.props.heightOfItem -
            endPosition * this.props.heightOfItem
        }}
      />
    </div>
  )
}

Answer 2

this.handleChange函数是对该组件函数的引用。

你可以试试这个：

 //Where My Problem Begins
  {this.props.listItems.slice(startPosition, endPosition).map(item => (
    <div handleChange={this..props.handleChange}
      className="react-scrollable-list-item"
      key={'list-item-' + item.id}>
      {item.content} 
    </div>
  ))}

你可以看到，我把这个函数指向一个你可以在这里回调的道具

Answer 3

使用 class SomeRepository { private $service; public function setService(ServiceClass $service) { $this->service = $service; } // ... } 而不是handleChange={() => this.handeChange(item.content)}来传递值handleChange={this.handleChange}

如何将props传递给从组件数组映射的组件？

3 个答案: