Как обновить значение атрибута с помощью ref в реагировать родной?

Question

В приведенном ниже коде есть атрибут "открыл", и я хочу изменить его значение с помощью ссылки. Здесь я использую 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}), Это изменение состояния приведет к повторному отображению вашего интерфейса. <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
       })
    }

    .....
}

и тогда вы можете просто позвонить changeMenuOpened метод с использованием MenuРеф от родителя.

this.menuRef.changeMenuOpened(true);