如何通过参数征用的函数在不指定参数为React Native中的儿童组件的情况下



我正在尝试制作一个需要一些道具的组件,其中一个道具正在接收函数。所有的道具都接收到相同的数据(函数Prop的参数)。下面是一个代码段来说明它:

<someComponent text={'Yes'}
               handler={() => someFunction('Yes')}
               anotherProps={"Yes"}
               yetAnotherProps={"Yes"} />

问题是我觉得这种实现太麻烦了 - 如果我想重新使用其他情况,我需要在所有道具内更改"是"。

因此,我想通过传递一个获取数据并在组件中其余的操作中循环数据的道具来摆脱这一点。但是,由于该函数涉及父组件中的setState,因此仍需要传递该函数。这样:

<someComponent data={'Yes'}
               handler={() => someFunction()}/>

假设我要制作的组件是一个按钮。组件内的代码:

return (
    <View>
        <TouchableOpacity onPress={() => this.props.handler(this.props.data)
                          style={this.props.data === 'Yes'? styles.chosen : styles.normal>
            <Text>{this.props.data}</Text>
        </TouchableOpacity>
    </View>
)

问题之所以出现,是因为我没有将任何数据传递到该功能中,因此SetState失败了。什么是正确的语法,可以正确通过该函数而不将参数指定为子组件?

您需要在这样的句柄中具有一个参数:

<someComponent text={'Yes'}
               handler={(data) => someFunction(data)}
               anotherProps={"Yes"}
               yetAnotherProps={"Yes"} />

相关内容

  • 没有找到相关文章

最新更新