繁体   English   中英

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

[英]How to pass class props to function in reactjs

我试图从Button类中设置的道具中提取Number的值。 然后在发现函数中呈现此值。 该类正确显示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;

没有错误消息。 预期结果显示为: https : //i.imgur.com/fr61SE0.png

显示的实际结果: https : //i.imgur.com/MRE0Lsj.png

发现是一个功能组件,您没有将任何内容传递给您的组件,在按钮组件中,您正在设置状态,这就是输出背后的原因。 尝试这个。

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;

现在您将获得想要的输出

我不确定您在哪里调用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;

我还将大写您的自定义React组件,例如Discover。

为什么反应中的成分需要大写?

您想使发现和按钮彼此保持同步,但是目前还没有任何操作。 button是具有本地状态的发现子项。 代替这种方式,使父级具有状态,然后可以将其传递给按钮组件。

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;

这是一个与您一起玩的现场示例

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM