请问：react如何给通过属性传递的组件 传属性

Question

render() {
    const Item =this.props.renderItem //这是传递过来的组件
    
    return (
      <View
        style={{ backgroundColor: 'orange', flex: 1, position: 'relative' }}
      >
        <View
          {...this._panResponder.panHandlers}
          style={{ backgroundColor: 'red' }}  //现在是通过父组件
        >
          {this.props.renderItem} // 我想直接向这里面传属性
        </View>

      </View>
    )
  }

Answer 1

用render props实现

官方文档

//父组件
render() {
    const props = Object.assign(
      {...this._panResponder.panHandlers},
      {style :{ backgroundColor: 'red'}}
    )
    return (
      <View
        style={{ backgroundColor: 'orange'... }}
      >
        {this.props.renderItem(props)}
      </View>
    )
  }

子组件
<Gesture
    renderItem={
        props => (
            <Image
                source={{ uri: 'https:xxx.jpg' }}
                {...props}
            />
        )
    }
/>

Answer 2

把父组件中的 props.renderItem 换成 props.children 来注入子组件

<Father fatherProps={}><Child childProps={/* 这里传入你想直接传给子组件的 props */}></Father>