Ошибка при передаче реквизита от родителя к потомку - недопустимый тип - PullRequest
Новая
       3

Ошибка при передаче реквизита от родителя к потомку - недопустимый тип

1 голос
/ 27 марта 2020

Я знаю, что на этом сайте много подобных вопросов, но ни один из них не соответствует моему коду, поэтому я не могу их понять, так как я совершенно новичок в React JS. В основном я делаю заявку в кости. Я создал класс для количества сторон и количества игральных костей отдельно, и я пытаюсь передать число сторон и количество игральных костей из обоих классов в другой класс, где я вычислю максимально возможную оценку -> Количество игральных костей * Количество сторон , Когда я передаю число сторон в дочерний класс, он успешен, однако, когда я передаю число кубиков, он выдает мне ошибку:

React.createElement: тип недействителен - ожидается строка или класс / функция, но получил: undefined

РЕДАКТИРОВАТЬ: наконец получил его. это не имело ничего общего с самими классами, я рендерил класс NoOfDice перед дочерним классом

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Ничего плохого в размещенном вами коде, как показано ниже 

class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>{this.props.noOfSides}</h1>
        <h1>{this.props.noOfDice}</h1>
      </div>
    );
  }
}
class NoOfDice extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mystate: 1 };
  }

  render() {
    return (
      <div>
        <h1>Number of Dice</h1>
        <h2>{this.state.mystate}</h2>
        <Child noOfDice={this.state.mystate} /> //error is
        in this line
      </div>
    );
  }
}

ReactDOM.render(<NoOfDice />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
0 голосов
/ 27 марта 2020

Ребенок ожидает noOfDice в качестве реквизита, поэтому он работает в одном сценарии, а не в другом. Вы должны оставить имя таким же. Я отредактировал твой код с именем реквизита как acceptedNumber. Также проверьте, правильно ли импортирован дочерний компонент.

Попробуйте: 

// NoOfSides
class NoOfSides extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mystate: 6 };
  }
  render() {
    return (<div>
      <h1>Number of Sides</h1>
      <h2 >
        {this.state.mystate}
      </h2>
      <Child acceptedNumber={this.state.mystate} />
    </div>
    );
  }
};

// NoOfDice
class NoOfDice extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mystate: 1 };
  }

  render() {
    return (<div>
      <h1>Number of Dice</h1>
      <h2 >
        {this.state.mystate}
      </h2>
      <Child acceptedNumber={this.state.mystate} />
    </div>
    );
  }
};

// Child
class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>{this.props.acceptedNumber}</h1>
      </div>
    )
  }
}
...