Javascript 如何将类道具传递给reactjs中的函数

我试图从Button类中设置的道具中提取Number的值。然后在discover函数中呈现该值。该类正确显示了Number的值。但是，该函数不显示数字的任何值

为了让它发挥作用，我已经花了一段时间来处理这个问题。但是我找不到任何解决我问题的办法

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Number: "55"
    };
  }
  render() {
    return (
      <div>
        <p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
      </div>
    );
  }
};

const discover = (props) => {
  return (
    <div>
      <Button />
      <p>Number: {props.Number}</p> //The value of Number is not displayed
    </div>
  );
};

export default discover;

类按钮扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
编号：“55”
};
}
render（）{
返回(
数字：{this.state.Number}
//数字的值显示在页面上
);
}
};
const discover=（道具）=>{
返回(
Number:{props.Number}
//不显示Number的值
);
};
导出默认发现；

没有错误消息。 预期结果如下：

实际结果表明：

---

您的discover是一个功能组件，您没有向组件传递任何内容，在按钮组件中，您正在设置状态，这是输出背后的原因。试试这个

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Number: "55"
    };
  }
  render() {
    return (
      <div>
        <p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
        <discover {...this.state} /> 
      </div>
    );
  }
};

const discover = (props) => {
  return (
    <div>
      <p>Number: {props.Number}</p> //The value of Number is not displayed
    </div>
  );
};

export default Button;

class按钮扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
编号：“55”
};
}
render（）{
返回(
数字：{this.state.Number}
//数字的值显示在页面上
);
}
};
const discover=（道具）=>{
返回(
Number:{props.Number}
//不显示Number的值
);
};
导出默认按钮；

---

现在您将获得所需的输出

我不确定您在哪里调用Discover组件，但您需要将数字作为道具传递给Discover组件，以便将其渲染

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Number: "55"
    };
  }
  render() {
    return (
      <div>
        <p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
        <Discover Number={this.state.Number}/> // we are passing Number as a prop to the Discover component
      </div>
    );
  }
};

const Discover = (props) => {
  return (
    <div>
      <Button />
      <p>Number: {props.Number}</p> //The value of Number is not displayed
    </div>
  );
};

export default Discover;

class按钮扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
编号：“55”
};
}
render（）{
返回(
数字：{this.state.Number}
//数字的值显示在页面上
//我们正在将数字作为道具传递给Discover组件
);
}
};
const Discover=（道具）=>{
返回(
Number:{props.Number}
//不显示Number的值
);
};
导出默认发现；

我还将利用您的自定义组件，如Discover

---

您想让“发现”和“按钮”彼此保持同步，但目前还没有任何东西可以做到这一点。button是具有本地状态的discover的子级。而不是让父对象拥有状态，然后它可以将该状态传递给按钮组件

class Discover extends Component {
  state = { number: 55 }
  render() {
    const { number } = this.state
    return (
      <div>
        <Button number={number} />
        <p>Number: {number}</p>
      </div>
    );
  }
};

const Button = ({number) => {
    return (
      <div>
        <p>Number: {number}</p>
      </div>
    );
  }
};

export default Discover;

类发现扩展组件{
州={number:55}
render（）{
const{number}=此.state
返回(
编号：{Number}

);
}
};
常量按钮=（{number）=>{
返回(
编号：{Number}

);
}
};
导出默认发现；

---

discover呈现按钮，该按钮呈现discover，该按钮呈现。您是对的，您不会想要这样的递归结构。但是关于如何传递道具的观点仍然成立。听起来好像

discover

需要存储状态，并将数字传递给按钮。