Question

我正在尝试制作一个React计算器。我正在为初始测试构建组件，但似乎无法对其进行编译。我认为我没有正确地将状态作为道具传递给Display组件，但是我真的不知道我在做什么错。

import React, { Component } from "react";
import "./App.css";

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "[]" };
  }

  render() {
    return (
      <div id="container">
        <Button value={"1"} type="input" />
        <Button value={"2"} type="input" />
        <Button value={"3"} type="input" />
        <Button value={"4"} type="input" />
        <Button value={"5"} type="input" />
        <Button value={"6"} type="input" />
        <Button value={"7"} type="input" />
        <Button value={"8"} type="input" />
        <Button value={"9"} type="input" />
        <Button value={"."} type="input" />
        <Button value={"="} type="input" />
        <Button value={"Clear"} type="input" />
        <Button value={"add"} type="input" />
        <Button value={"substract"} type="input" />
        <Button value={"multiply"} type="input" />
        <Button value={"divide"} type="input" />
        <Display value={this.state.value} />
      </div>
    );
  }
}

const Button = props => {
  return <input type="Button" value={props.value} />;
};

const Display = props => {
  return (
    <div>
      <p>{props.state.value}</p>
    </div>
  );
};

Answer 1

给您的value组件提供的Display道具将称为value，而不是state.value：

const Display = props => {
  return (
    <div>
      <p>{props.value}</p>
    </div>
  );
};

反应：无法读取未定义的属性“值”

1 个答案: