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

Question

I am new to React and sometimes struggle with the terminology. My problem is that I am creating a ScrollableList of components which are passed as an array prop to the ScrollableList . The ScrollableList then maps each of the components inside a div and this does not allow me to pass props to the component such as 'handleChange'. Is there another way to do this that I don't know about?

ScrollableList rendering:

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>
  )
}

The {item.content} contains the component that I wish to pass the prop handleChange={this.handleChange} to. Is there a way to do this or is my design the problem?

Answer 1

You can extract item to separate function

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

the this.handleChange function is reference to this component function .

you can try this:

 //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>
  ))}

as you can see, i put the function pointing to a props which you can make a callback here

Answer 3

使用handleChange={() => this.handeChange(item.content)}而不是handleChange={this.handleChange}来传递值{item.content}