代码之家 › 专栏 › 技术社区 › Asleepace

在React Native中动态添加属性

react-props react-native

Asleepace · 技术社区 · 6 年前

假设我有这样一个组件:

<TouchableOpacity activeOpacity={1} />

在某些情况下,我想添加一个属性 pointerEvents 或者类似的事情:

<TouchableOpacity pointerEvents={'box-none'} activeOpacity={1} />

最近,我通过设置一个变量并根据一些内部状态将其传递给组件来实现这一点,例如:

render() {
    const pointerType = this.state.isVisible ? 'box-none' : 'box-only';
    return (
       <TouchableOpacity pointerEvents={pointerType} activeOpacity={1} />
    )
}

但是,在某些情况下,这并不理想,我想知道是否有一种方法可以动态地包含这样的属性:

render() {
    const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
    return (
       <TouchableOpacity {pointerJSX} activeOpacity={1} />
    )
}

1 回复 | 直到 6 年前

Timothy Alfares 6 年前

你能试试这个吗?

render() {
  const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
  return (
    <TouchableOpacity {...pointerJSX} activeOpacity={1} />
  )
}

编辑

我想我最好解释一下,这样你和其他开发人员就知道这个问题发生了什么。

基本上

const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;

意味着pointerJSX变量是基于isVisible状态分配的。如果isVisible为true,则将其分配给{pointerEvent:'box none'}的对象;否则,如果isVisible为false,则为空

如果你想把它用在一个组件中,它会像这样

<TouchableOpacity {...pointerJSX} activeOpacity={1} />

{…pointerJSX}在这里意味着它将把pointerJSX对象的内容分配给touchablecompacity组件。如果pointerJSX变量为空,则不会将任何道具放入TouchableOpacity中。

希望这有助于解释这段代码。

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前