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

在React Native中动态添加属性

react-props react-native

0

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 年前

1

3

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中。

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

推荐文章

Raghav Kavimandan · 在React.js中使用道具渲染多个图像

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Nicholas Hrboka · 天气应用程序使用React:将自定义纬度/经度输入API请求时出现问题

7 年前

Ishan Patel · 如何在ReactJS中访问classname字段中方法的返回值?

7 年前

Rohan Kulkarni · 反应js onclick事件:无法读取未定义的属性“props”

7 年前

Yas · 为什么不是一个函数

7 年前

Arslan Tariq · 这当父级状态必须由子级更新时,setState不起作用

7 年前