Question

假设我有一个像这样的组件：

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

Answer 1

您可以试试吗？

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

修改

我认为最好向我做一点解释，以便您和其他开发人员知道此问题正在发生的情况。

基本上

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

表示基于isVisible状态分配了pointerJSX变量。如果isVisible为true，则将其分配给{pointerEvent：'box-none'}对象，否则，如果为false，则为null

然后，如果要在组件中使用它，它将像这样

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

这里的

{... pointerJSX}意味着它将把pointerJSX对象的内容分配给TouchableOpacity组件。然后，如果pointerJSX变量为null，则不会将任何道具放入TouchableOpacity。

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

在React Native中动态添加属性

1 个答案: