Question

我尝试在道具的帮助下从其他组件中获取价值，但这种方法无法正常工作。

这是我的逻辑

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

您的两个组件都看起来不对，需要进行许多更正

您的代码

    //don’t what is Connect here. A class followed its class name must be single word
     class Main Connect extends Component {
           constructor(props) {
               //you need to call super(props); here to get props from parent inside constructor 
               // set age to a state but what you are doing below isn’t right way
               this.age = this.props.age
            }

          render() {
              // this is totally wrong check my corrected code below to understand better
             <Child />
                 return(this.age)
              }

         }

        class Child Connect extends Component {

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

         }

检查以下更新的代码。这就是父母到孩子的工作方式

   class Main extends Component{
       render() {
          return (<div><Child age='21' /></div>)
       }
    }

   class Child extends Component {
       constructor(props){
           super(props);
           this.state = {
               age: props.age
           }
       }
       render(){
           return(<div><h1>{this.state.age}</h1></div>)
       }

PS：-您得到其他人的反对票，因为句子不正确，并且您发布的信息不完整，存在很多问题。

Answer 2

我不确定您的情况如何。输入元素的更改是向上传递道具的典型情况。为此，通过属性使用函数来处理更改（并将实际值返回给输入）：

Main.js

import AgeInput from './AgeInput';

class Main extends Component {
  state = {
    age: ''
  }

  handleAgeInputChange = ({target}) => {
    const { value: age } = target;
    this.setState({ age })
  }

  render() {
    return <AgeInput onChange={this.handleAgeInputChange} value={this.state.age} />
  }
}

AgeInput.js （子级）

const AgeInput = ({ onChange, value }) => (
  <input onChange={onChange} value={value} />
);

export default AgeInput;

如何在React js中从一个组件获得另一个组件的价值？

2 个答案: