在 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;

表示pointerJSX变量是根据isVisible状态赋值的。如果 isVisible 为真，它会被赋值给 { pointerEvent: 'box-none' } 的一个对象，否则如果为假则为 null

那么如果你想把它用到一个组件中，就这样

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

{...pointerJSX} 这里的意思是将pointerJSX对象的内容赋值给TouchableOpacity组件。然后如果 pointerJSX 变量为 null，它不会将任何道具放入 TouchableOpacity。

希望对解释这段代码有所帮助。

在 React Native 中动态添加属性

Dynamically add properties in React Native

react-native

react-props