在 React Native 中动态添加属性

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中放入任何props。

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