将 prop 从父级传递给子级时出错 - 类型无效

Question

我知道这个网站上有很多类似的问题，但没有一个与我的代码匹配，所以我无法理解它们，因为我对 React JS 完全陌生。基本上我正在做一个骰子应用程序。我已经分别为面数和骰子数量创建了一个类，我试图将两个类的面数和骰子数量传递到另一个类中，我将计算可能的最大分数 - >骰子数 * 面数. 当我将面数传递给子类时，它是成功的，但是当我传递骰子数时，它给了我错误：React.createElement：类型无效——期望一个字符串或一个类/函数，但得到：未定义编辑：终于明白了。它与类本身无关，我在子类之前渲染 NoOfDice 类

Answer 1

您发布的代码没有问题，如下所示

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>

Answer 2

Child 期望 noOfDice 作为道具，这就是为什么它在一种情况下而不是另一种情况下工作的原因。您应该保持名称不变。我已将您的代码编辑为 prop 名称为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>

    )

  }

}