Как проходить здесь штаты?

Question

У меня есть компонент ModifyWordPartButton это имеет состояние isHovered и ребенок IconButton, IconButtononclick это потомок другого компонента, SelectWordPartToModifyесть метод handleClickOpen(), IconButton должен иметь возможность onClick знак равно SelectWordPartToModify"s handleClickOpen(),

При использовании этого кода:

ModifyWordPartButton:

.
.
.
render() {
  return (
    <div>
      <IconButton className={this.state.isHovered ? 'hoveredClass' : null />
    </div>
  );
}

SelectWordPartToModify:

.
.
.
render() {
    <ModifyWordPartButton />
}

результаты в IconButton inheritng ModifyWordPartButton"s isHovered состояние, но не наследование SelectWordPartToModify"s handleClickOpen(),

И когда я использую этот код:ModifyWordPartButton:

.
.
.
render() {
  return (
    <div>
      {this.children}
    </div>
  );
}

SelectWordPartToModify:

.
.
.
render() {
  <ModifyWordPartButton onClick={this.handleClickOpen}>
    <IconButton onClick={this.handleClickOpen}
  </ModifyWordPartButton
}

IconButton не наследует ModifyWordPartButton"s isHovered государство.

Я пробовал в ModifyWordPartButton"s render() заменить this.props.children с:

this.props.children.map(
  child => {
    React.cloneElement(child, this.state)
  }
)

но React дал мне ошибку о том, что я не узнаю IconButton"s isHovered имущество.

Вот полный код, который я использую: https://codesandbox.io/s/zwlz41mo93?codemirror=1&eslint=1&fontsize=14

Как я могу решить это?

Answer 1

Извините, я не до конца понимаю ваш вопрос, но.. Не можете ли вы передать более одного реквизита IconButton? Что-то вроде следующего:

SelectWordPartToModify

render() {
    return <ModifyWordPart handleClick={this.handleClickOpen} />
}

ModifyWordPart

render() {
    return (
        <IconButton
            className={this.state.isHovered ? 'hoveredClass' : null}
            handleClick={this.props.handleClick} />
    );
}

Сюда, handleClickOpen должны быть определены в SelectWordPartToModifyи может быть выполнен внутри IconButton с помощью this.props.handleClick(), Кроме того, у вас также есть className из IconButton на основе isHovered собственностью ModifyTwoPart

---

РЕДАКТИРОВАТЬ: Относительно вашей песочницы:

1. В строке 78 ModifyWordPartButton ты не должен писать handleClickOpen={this.handleClickOpen} но вместо этого onClick={this.handleClickOpen}: быть div простой элемент DOM, вы не можете передать ему свойство как свой собственный компонент.

2. В строке 71 того же файла, опять же, вы должны использовать onClick вместо handleClickOpen: IconButton действительно является Компонентом, но он относится к Material UI и, похоже, ожидает onClick реквизит.

3. Более того, в обеих строках не стоит писать this.handleClickOpen, но вместо этого this.props.handleClickOpenпотому что функция передается ModifyWordPartButton используя реквизит!

4. Я думаю, IconButton в строке 60-68 из SelectSuffixToModify может быть удален без каких-либо последствий (если я правильно понял, что вы хотели сделать, то хранить его там бесполезно).

Я разбудил ваш sandCodebox, вот и он → https://codesandbox.io/s/6wxj4nyn6z Я думаю, что он делает то, что вы просили.

Тем не менее, я думаю, что вам нужны некоторые разъяснения, потому что, основываясь на том, что вы написали, я думаю, у вас есть некоторая путаница в вашем уме. Когда вы пишете свой собственный Компонент, вы можете заставить его ожидать нужного вам реквизита: в вашем примере, ModifyWordPartButton это ваш собственный Компонент, и вы создали его таким образом, чтобы ожидать опору по имени handleClickOpen; таким образом, когда вы звоните из SelectSuffixToModifyrender() метод, вы можете передать ему функцию, используя handleClickOpen={...},

Вместо, IconButton сделан от кого-то другого, таким образом, вы должны знать, каковы его реквизиты! Информацию, которую, я думаю, вы можете найти в официальной документации материала UI:)