네이티브 응용 프로그램을 반응이 이렇게 떨어지게를 반환 이후에

Question

나는 성분을 반응 한 구성 요소 및 부하 반응 저장 :

constructor(){ 
    ... 
    this.Comp1 = <Component1 ..... > 
    this.Comp2 = <Component2 ..... > 
} 
render(){ 
    let Show = null 
    if(X) Show = this.Comp1 
    else Show = this.Comp1 
    return(
     {X} 
     ) 
    } 

을 내 구성 요소의 모두가 그 안에 API 요청이

내 문제는 조건이 변경되고 구성 요소간에 토글을 보내면 구성 요소가 해당 API로 요청하여 동일한 결과를 얻으려고 할 때마다

나는 원하는가? 그들이 요청 때마다 그래서 당신은 여전히 ​​두 comp1를 렌더링하는 자식 요소 comp1 및 comp2

의 각 내부의 숨기기를 처리하고 보여주는 것입니다 않는 방법

Answer 1

하나를 보내 못해 구성 요소를 저장하는 방법을 알고 및 부모 구성 요소의 comp2을 각각 전달하지만 내부 내용을 표시하거나 숨길 필요가 있는지 알려주려면 표시를 각각 전달해야합니다. 표시되는 경우 올바른 구성 요소 내용을 렌더링하고 그렇지 않으면 비어 있습니다. <Text></Text>

두 하위 구성 요소가 모두 상위에 있으며 제거되지는 않지만, l 어느 것이 부모 구성 요소에 의해 자체 콘텐트를 보여야 하는가?

따라서 데이터를 한 번만 가져옵니다. 에서

확인 작업을 예는 JS 반응 : https://codesandbox.io/s/84p302ryp9
콘솔을 선택하면 당신은 그 페치 COMP1 및 COMP2에 대해 한 번 수행 찾을 로그인합니다.

또한 네이티브 아래의 반응에서 같은 예를 확인 :

class Parent extends Component { 
    constructor(props) 
    { 
    super(props); 
    this.state={ 
     show1 : true //by default comp1 will show 
    } 
    } 

    toggleChild=()=>{ 
    this.setState({ 
     show1 : !this.state.show1 
    }); 
    } 

    render(){ 
    return (
     <View > 
     <Button onPress={this.toggleChild} title="Toggle Child" /> 
     <Comp1 show={this.state.show1} /> 
     <Comp2 show={!this.state.show1} /> 
     </View> 
    ) 
    } 
} 

COMP1 :

class Comp1 extends Component 
{ 
    constructor(props) { 
    super(props); 
    this.state={ 
     myData : "" 

    } 
    } 

    componentWillMount(){ 
    console.log("fetching data comp1 once"); 
    this.setState({ 
     myData : "comp 1" 
    }) 
    } 


    render(){ 
    return (
     this.props.show ? <Text>Actual implementation of Comp1</Text> : <Text></Text> 
    ) 
    } 
} 

COMP2 :

class Comp2 extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     myData2: "" 

    } 
    } 

    componentWillMount() { 
    console.log("fetching data in comp2 once"); 
    this.setState({ 
     myData2: "comp 2" 
    }); 
    } 


    render() { 
    return (
     this.props.show ? <Text>Actual implementation of Comp2</Text> : <Text></Text> 
    ) 
    } 
} 

Answer 2

나는, 당신이 모이해야한다고 생각 모든 논리를 주 구성 요소 (데이터 가져 오기 및 저장)로 가져 오면 구성 요소 1과 구성 요소 2는 단순한 멍청한 구성 요소입니다. 구성 요소 1과 구성 요소 2에서 "구성 요소에 일부 데이터가 있습니까?"를 선택할 수 있습니다. 데이터가 없으면 상위 구성 요소에서 해당 데이터에 대한 요청을 트리거 할 수 있습니다. 여기

전체 작업 예 : https://codesandbox.io/s/7m8qvwr760

class Articles extends React.Component { 
    componentDidMount() { 
    const { fetchData, data } = this.props; 

    if (data && data.length) return; 

    fetchData && fetchData(); 
    } 

    render() { 
    const { data } = this.props; 

    return (
     <div> 
     {data && data.map((item, key) => <div key={key}>{item.title}</div>)} 
     </div> 
    ) 
    } 
} 

class App extends React.Component{ 
    constructor(props){ 
    super(props); 

    this.state = { 
     news: [], 
     articles: [], 
     isNews: false 
    } 
    } 

    fetchArticles =() => { 
    const self = this; 

    setTimeout(() => { 
     console.log('articles requested'); 

     self.setState({ 
     articles: [{title: 'article 1'}, {title: 'articles 2'}] 
     }) 
    }, 1000) 
    } 

    fetchNews =() => { 
    const self = this; 

    setTimeout(() => { 
     console.log('news requested'); 

     self.setState({ 
     news: [{ title: 'news 1' }, { title: 'news 2' }] 
     }) 
    }, 1000) 
    } 

    handleToggle = (e) => { 
    e.preventDefault(); 
    this.setState({ 
     isNews: !this.state.isNews 
    }) 
    } 

    render(){ 
    const { news, articles, isNews} = this.state; 

    return (
     <div> 
     <a href="#" onClick={this.handleToggle}>Toggle</a> 

     {isNews? (
      <News data={news} fetchData={this.fetchNews} /> 
     ): (
      <Articles data={articles} fetchData={this.fetchArticles} /> 
     )} 

     </div> 

    ) 
    } 
}