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

Question

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

Также, если вы хотите использовать ref, тогда вам следует рассмотреть возможность создания внутри Menu переменной состояния, которая должна быть инициализирована с помощью opened prop, и у вас должен быть метод в Menu, которыйизменит состояние.

Ваш код должен выглядеть следующим образом:

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

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

    .....
}

, а затем вы можете просто вызвать метод changeMenuOpened, используя Menu ref из родительского элемента.

this.menuRef.changeMenuOpened(true);