將狀態從父組件傳遞給子函式

當涉及到將狀態從一個組件傳遞到一個函式時，我有點迷茫。我已經成功地將一個狀態從Home傳遞到ListHome（一個正在匯入并渲染到Home的組件），但我很難繼續將它傳遞到正在ListHome（滑塊）中渲染的一個函式。主要是由于它是一個函式。

我再次翻閱了檔案，但我仍然難以理解這應該如何運作。一個直接的編輯/示例將是非常有幫助的！

我正在渲染首頁，但它是一個函式。

我正在App.js中的堆疊中渲染Home。如果你想讓我包括這個檔案，請告訴我。

我非常感謝你的任何見解。

Home.js

export default class Home extends React. 組件 {
 
  constructor（props） {
    super(props)
    this.state ={
      visible: true,
      whichComponentToShow: 'Screen1'。
    };
}

goToMap = () => {
  this.setState（{whichComponentToShow: 'Screen2'})
}
goToList = () => {
  this.setState（{whichComponentToShow: 'Screen1'})
}

  render（）{
     if(this.state.whichComponentToShow =='Screen1') {
      return(
       <View style={{backgroundColor:  '#d1cfcf' ,flex: 1}}>/span>
        <ListHome。
          renderMap = {this.goToMap.bind(this)}
          renderList = {this.goToList.bind(this)}
        />

ListHome.js

export default class ListHome extends React. 組件 {
  
  goToMap = () => {
    this.props.renderMap（）。
  }

  goToList = () => {
    this.props.renderList（）。
  }

render（）{
  return (

     <Slider
         renderMap = {this.goToMap.bind(this)}
         renderList = {this.goToList.bind(this)}
     />

Slider.js（我還沒有在這個檔案中實作任何試圖傳遞狀態的功能）

const Slider=（props）=> {
  
  const [active, setActive] = useState(false)
  let transformX = useRef(new Animated. Value(0)）.current。

  //我洗掉了使用上述const和let的影片代碼。


  return (
    //code I removed that just create a button. 
    //可觸摸的不透明度是我想使用的狀態。。
    <TouchableOpacity onPress={（）/span> => this.goToMap}>

    </TouchableOpacity> 
  );
}


export default Slider

uj5u.com熱心網友回復：

你的狀態和狀態設定回呼被定義為Home類組件中的類方法。你可以用this.goToMap和this.goToList來訪問它們，并將它們作為組件道具傳入ListHome。

在ListHome類組件中，你可以用this.props.renderMap和this.props.renderList分別訪問它們，因為這就是道具的名稱所在。

在Slider函陣列件中，你可以用props.renderMap和props.renderList來訪問每個道具，因為這就是道具的名字（注意在函陣列件中沒有this來訪問道具）。

這通常被稱為道具鉆取。你只是從App -> ListHome -> Slider一路傳遞到原始函式的參考，以便它最終可以被執行。

沒有必要在下行時重新定義這個函式。你所要說的是，當有一個onPress/onClick事件時，執行該函式。而你想要執行的函式就是在Home中定義的那個。

import "./styles.css"/span>。
import React from " react"。

export default class Home extends React. 組件 {
  constructor（props） {
    super（props）。
    this.state = {
      whichComponentToShow: "Screen1"。
    };
  }

  goToMap = () => {
    this.setState({ whichComponentToShow: "Screen2" }）。)
  };
  goToList = () => {
    this.setState({ whichComponentToShow: "Screen1" }）。)
  };

  render（） {
    if (this.state.whichComponentToShow == "Screen1") {
      return (
        <div style={{ backgroundColor:  "#eee", flex: 1 }}> 
          <h1>home - screen 1</h1> 
          狀態。
          <pre>{JSON.stringify(this.state, null, 2)}</pre> 
          <ListHome renderMap={this. goToMap} renderList={this.goToList} <>
        </div>/span>
      );
    } else {
      return (
        <div style={{ backgroundColor:  "pink", flex: 1 }}>/span>
          <h1>home - screen 2</h1> 
          狀態。
          <pre>{JSON.stringify(this.state, null, 2)}</pre> 
          <ListHome renderMap={this. goToMap} renderList={this.goToList} <>
        </div>/span>
      );
    }
  }
}

class ListHome extends React.component {
  render（） {
    return (
      <div style={{ backgroundColor:  "#ddd", flex: 1 }}>/span>
        <h2>ListHome</h2> 
        串列首頁
        <滑塊
          renderMap={this.props.renderMap}
          renderList={this.props.renderList}
        />
      </div>/span>
    );
  }
}

const Slider = (props) => {
  return (
    <div style={{ backgroundColor:  "#ccc", flex: 1 }}>/span>
      <h3>滑塊</h3> 
      <button onClick={props. renderMap}>Map</button> 。
      <button onClick={props. renderList}>List</button> 。
    </div>
  );
};

uj5u.com熱心網友回復：

你可以把道具鉆進組件，我已經用功能組件重寫了代碼。它沒有經過測驗。

export default function Home（） {
  const [visible, setVisible] = useState(true)。
  const [componentToShow, setComponentToShow] = useState（'Screen1'）。

  const goToMap = (/span>) => {
  setComponentToShow('Screen2')
}
 const goToList = (/span>) => {
  setComponentToShow('Screen1')
}

  return(
     { (whichComponentToShow === 'Screen1') ? (
       <View style={{backgroundColor:  '#d1cfcf' ,flex: 1}}>/span>
        <ListHome。
          renderMap = {goToMap}
          renderList = {goToList}。
        />)
:<></>
     })

export default function ListHome({renderMap, renderList}) {
  
  return (

     <Slider
         renderMap= {renderMap}
         renderList = {renderList}
     />
)

const Slider = （{renderMap, renderList}）=> { // you have them here 
  
  const [active, setActive] = useState(false)
  let transformX = useRef(new Animated. Value(0)）.current。

  //我洗掉了使用上述const和let的影片代碼。


  return (
    //code I removed that just create a button. 
    //可觸摸的不透明度是我想使用的狀態。。
    <TouchableOpacity onPress={renderMap}>/span>

    </TouchableOpacity>/span>
  );
}

標籤：

上一篇：在非React構建的網站中，匯入React組件的正確方式是什么？

下一篇：React-如何在包含函式中排除特定的陣列值