एक मुख्य घटक है, जो एक मेनू घटक का उपयोग करता है। मेनू घटक चयनित मेनू आइटम के बारे में जानकारी सहेजने के लिए एक राज्य संपत्ति का उपयोग कर रहा है। लेकिन अब मुझे मुख्य घटक में चयनित मॉड्यूल प्राप्त करने की आवश्यकता है। मैं उसको कैसे करू?

class Main extends Component {
    doSomething(module) {
        console.log(module) // should get 'targetValue'

        // I need to get the info, which module is selected.
        // This info is stored as a state value in the `MainMenu` Component
        // How do I get this information? I can't use the parameter `selectModule` as it is done here.
    }

    render() {
        return (
            <div>
                <MainMenu />
                <Button 
                    onClick={ this.doSomething.bind(this, selectedModule) }
                />
            </div>
        )
    }
}

इस घटक में प्रत्येक मॉड्यूल (modules सरणी के) के लिए एक मेनू तैयार किया जाता है। एक आइटम पर क्लिक करके, यह मॉड्यूल module स्टेट वेरिएबल में स्टोर हो जाता है।

class MainMenu extends Component {
    constructor(props) {
        super(props)
        this.state = { 
            module: 'initialValue'
        }
    }

    selectModule(module) {
        this.setState({ module })
    }

    render() {
        return (
            <Menu>
                <Menu.Item onClick={ this.selectModule.bind(this, 'targetValue') } >
                    { title }
                </Menu.Item>
            </Menu>
        )
    }
}
0
user3142695 31 मई 2017, 22:20

4 जवाब

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

कुछ जादू करने और आंतरिक स्थिति की जांच करने के बजाय यदि बच्चे घटक राज्य को माता-पिता तक उठाते हैं। बच्चा स्टेटलेस हो जाता है।

class Main extends Component {
  state = {
    module: 'initialValue'
  }

  setActiveModule = (module) => {
    this.setState({ module })
  }

  render() {
    return (
      <MainMenu onChange={this.setActiveModule} />
    )
  }
}

class MainMenu extends Component {
  onClick = (module) => () => {
    this.props.onChange(module)
  }

  render() {
    return (
      <Menu>
        <Menu.Item onClick={this.onClick(title)} >
          {title}
        </Menu.Item>
      </Menu>
    )
  }
}
1
Andreyco 31 मई 2017, 22:27

मेनमेनू घटक में state को बनाए रखने के बजाय, मूल घटक मुख्य में बनाए रखें, और मॉड्यूल मान को props में पास करें, state को अपडेट करने के लिए मेनमेनू को एक function भी पास करें। चाइल्ड मेनमेनू से पैरेंट कंपोनेंट मेन।

इसे इस तरह लिखें:

class Main extends Component {

    constructor(props) {
        super(props)
        this.state = { 
            module: 'initialValue'
        }
        this.update = this.update.bind(this);
    }

    update(value){
        this.setState({
            module: value
        });
    }

    doSomething(){
        console.log(this.state.module);
    }

    render() {
        return (
            <div>
                <MainMenu module={this.state.module} update={this.update}/>
                <Button 
                    onClick={ this.doSomething.bind(this) }
                />
            </div>
        )
    }
}


class MainMenu extends Component {

    selectModule(module) {
        this.props.update(module);
    }

    render() {
        console.log(this.props.module);
        return (
            <Menu>
                <Menu.Item onClick={this.selectModule.bind(this, 'targetValue') } >
                    { title }
                </Menu.Item>
            </Menu>
        )
    }
}
1
Mayank Shukla 31 मई 2017, 22:29

प्रतिक्रिया के साथ स्थिति साझा करना कभी-कभी थोड़ा कठिन होता है।

प्रतिक्रिया दर्शन यह कहता है कि हमें ऊपर से नीचे तक राज्य का प्रबंधन करना है। विचार अपने माता-पिता में राज्य को संशोधित करना है, और सूचनाओं को सहारा के रूप में पास करना है। उदाहरण के लिए, आइए निम्नलिखित परिदृश्य की कल्पना करें:

class Main extends React.Component {
  contructor(props) {
    super(props);
    this.state = { currentMenuSelected: 'Home' };
  }

  onPageChange(newPage) {
    this.setState({ currentMenuSelected: newPage });
  }

  render() {
    return(
      <div>
        <AnotherComponent currentMenu={this.state.currentMenuSelected} />
        <MenuWrapper onMenuPress={this.onPageChange} />
      </div>
    )
  }
}

मेरे उदाहरण में, हम पृष्ठ बदलते समय MenuWrapper को Main.onPageChange का उपयोग करने के लिए कहते हैं। इस तरह, अब हम प्रॉप्स का उपयोग करके उस वर्तमान चयनित मेनू को AnotherComponent में पास करने में सक्षम हैं।

यह प्रतिक्रिया का उपयोग करके राज्य साझाकरण को प्रबंधित करने का पहला तरीका है, और डिफ़ॉल्ट एक लाइब्रेरी द्वारा प्रदान किया गया है

यदि आप अधिक जटिल सामग्री का प्रबंधन करना चाहते हैं, और अधिक स्थिति साझा करना चाहते हैं, तो आपको फ्लक्स आर्किटेक्चर पर एक नज़र डालनी चाहिए https://facebook.github.io/flux/docs/overview.html

और फ्लक्स का सबसे सामान्य कार्यान्वयन : http://redux.js.org/

0
mfrachet 31 मई 2017, 22:30

मेन्यू स्टेट को मुख्य कंपोनेंट में स्टोर करें, और स्टेट अपडेटर को मेन्यू में पास करें।

यह टॉप-डाउन अवस्था में आने में काफी मददगार होता है https://facebook.github.io/react/docs/thinking- in-react.html

-1
Andy_D 31 मई 2017, 22:23