如何在react js中从一个组件到另一个组件获取价值？

Question

我试图在 props 的帮助下从其他组件中获取价值，但它不起作用。

这是我的逻辑

main.js 向 child.js 组件发出请求，在 child.js 中我变老了，但它不起作用。

class Main Connect extends Component {

   constructor(props) {

       this.age = this.props.age

   }

   render() {

      <Child />

      return(this.age)

   }

}

class Child Connect extends Component {

   render()

      return(<Main age='21' />)

}

Answer 1

您的两个组件看起来都有问题，需要进行许多更正你的代码&nbsp; &nbsp; //don’t what is Connect here. A class followed its class name must be single word&nbsp; &nbsp; &nbsp;class Main Connect extends Component {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//you need to call super(props); here to get props from parent inside constructor&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// set age to a state but what you are doing below isn’t right way&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.age = this.props.age&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // this is totally wrong check my corrected code below to understand better&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Child />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return(this.age)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; class Child Connect extends Component {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;render()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(<Main age='21' />)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}检查以下更新的代码。这是从父到子的工作方式&nbsp; &nbsp;class Main extends Component{&nbsp; &nbsp; &nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<div><Child age='21' /></div>)&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; &nbsp;class Child extends Component {&nbsp; &nbsp; &nbsp; &nbsp;constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;super(props);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;age: props.age&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;render(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return(<div><h1>{this.state.age}</h1></div>)&nbsp; &nbsp; &nbsp; &nbsp;}PS:- 你得到了其他人的反对票，因为句子不正确，而且你发布的内容不完整，有很多问题。

Answer 2

我不确定你的情况是什么。输入元素的变化是向上传递 props 的典型情况。为此，通过属性使用函数来处理更改（并将实际值传递回输入）：主程序import AgeInput from './AgeInput';class Main extends Component {&nbsp; state = {&nbsp; &nbsp; age: ''&nbsp; }&nbsp; handleAgeInputChange = ({target}) => {&nbsp; &nbsp; const { value: age } = target;&nbsp; &nbsp; this.setState({ age })&nbsp; }&nbsp; render() {&nbsp; &nbsp; return <AgeInput onChange={this.handleAgeInputChange} value={this.state.age} />&nbsp; }}AgeInput.js（儿童）const AgeInput = ({ onChange, value }) => (&nbsp; <input onChange={onChange} value={value} />);export default AgeInput;