react-native - 如何通过在 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

道具应该是不可变的，并且为了动态更改更新它们，您应该考虑通过状态设置它们。

您的代码应如下所示：

<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其中创建一个状态变量，应该用openedprop 初始化，并且你应该有一个方法Menu来改变状态。

您的代码应如下所示：

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

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

    .....
}

然后您可以使用父级的 ref调用该changeMenuOpened方法。Menu

this.menuRef.changeMenuOpened(true);