नीचे Parent वर्ग में, this.state.foo अपेक्षानुसार काम करता है, हालांकि Child वर्ग में, this.props.foo अपरिभाषित है।

यह एक आम मुद्दा है, हालांकि मैंने अन्य धागों से जिन समाधानों की कोशिश की है, उनमें से किसी ने भी काम नहीं किया है।

प्रतिक्रिया -v: १६.३

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      foo: 'test'
     };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">{this.state.foo}</h1>
        </header>
      <Child />
      </div>
    );
  }
}


class Child extends Component {

  render() {
    return (
      <div className="child">
        <h1>This is a {this.props.foo}</h1>
    </div>
     );
  }
}


export default Parent;
0
Martin 3 अप्रैल 2018, 16:03

3 जवाब

सबसे बढ़िया उत्तर

आपको प्रॉप्स को Child में ट्रांसफर करना होगा:

<Child foo={this.state.foo} />

state का Parent स्वतः ही Child के पास नहीं जाता है।

4
Davin Tryon 3 अप्रैल 2018, 13:14

ठीक है यदि आप चाइल्ड कंपोनेंट में foo को प्रॉप्स के रूप में एक्सेस करना चाहते हैं तो आपको इस तरह चाइल्ड कंपोनेंट में this.state.foo पास करना होगा

<Child foo = {this.state.foo}  />

तो इसे अपने कोड में बदलें

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      foo: 'test'
     };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">{this.state.foo}</h1>
        </header>
      <Child foo = {this.state.foo}  />
      </div>
    );
  }
}


class Child extends Component {

  render() {
    return (
      <div className="child">
        <h1>This is a {this.props.foo}</h1>
    </div>
     );
  }
}


export default Parent;
1
Nishant Dixit 3 अप्रैल 2018, 13:05

आपको प्रॉप्स को चाइल्ड कंपोनेंट में ट्रांसफर करने की आवश्यकता है:

<child foo={this.state.foo} />

जहाँ आप केवल चाइल्ड कंपोनेंट में प्रॉप्स पढ़ सकते हैं

2
Anil 3 अप्रैल 2018, 13:08