如何通过在 react native 中使用 ref 来更新属性值？

Question

在下面的代码中有“opened”属性，我想通过使用 ref 来更改它的值。这里我使用 ref 作为索引数组。

<Menu renderer={renderers.SlideInMenu} ref={(Menu) => { this.rowRefs[item.id] = Menu; }} opened={false}>

我试过了

function updateRef(id){
  React.findDOMNode(this.refs.id).setAttribute("opened", true);
}

谁能解释一下如何创建索引引用以及如何使用它？

Answer 1

道具应该是不可变的，为了动态change更新它们，你应该考虑通过状态来设置它们。

您的代码应如下所示：

<Menu renderer={renderers.SlideInMenu} ref={component => this.menuRef = component }} opened={this.state.opened}>

在这种情况下，<Menu .. > 假定在具有状态变量 opened 的组件中呈现，您可以使用 this.setState({opened: true}) 更改该状态变量。此状态更改将使您的 UI 重新呈现，因此 <Menu .. > 将使用 opened={true} 呈现。

此外，如果您想使用ref，那么您应该考虑在Menu 中创建一个状态变量，该变量应该使用opened 属性进行初始化，并且您应该在Menu 中有一个方法，它将改变状态。

您的代码应如下所示：

class Menu extends React.Component {
    constructor (props) {
       super(props);
       this.state = {
           menuOpened: props.opened
       }
    }

    changeMenuOpened = (value) => {
       this.setState({
           menuOpened: value
       })
    }

    .....
}

然后您可以使用来自父级的Menu 的引用调用changeMenuOpened 方法。

this.menuRef.changeMenuOpened(true);