Как проходить здесь штаты? - PullRequest
Новая
       72

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

0 голосов
/ 21 февраля 2019

У меня есть компонент ModifyWordPartButton, который имеет состояние isHovered и дочерний элемент IconButton.IconButton onclick, который является дочерним по отношению к другому компоненту, SelectWordPartToModify, который имеет метод handleClickOpen().IconButton должен иметь возможность иметь onClick = SelectWordPartToModify 'handleClickOpen().

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

ModifyWordPartButton: 

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

SelectWordPartToModify: 

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

приводит к IconButton наследованию ModifyWordPartButton isHovered состояния, но не наследованию SelectWordPartToModify * handleClickOpen().

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

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

SelectWordPartToModify: 

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

IconButton не наследует ModifyWordPartButton isHovered состояние.

Я пытался в ModifyWordPartButton render() заменить this.props.children на: 

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

, но React дал мне ошибку о том, что IconButton * isHoveredсвойство.

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

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

1 Ответ

0 голосов
/ 21 февраля 2019

Извините, я не до конца понимаю ваш вопрос, но .. Разве вы не можете передать более одного реквизита на 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 действительно является Компонентом, но он относится к интерфейсу материала и кажется,ожидать onClick реквизита.

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

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

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

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

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

...