将状态从父组件传递到子函数

Question

在将状态从组件传递到函数时，我有点不知所措。我已经成功地将状态从 Home 传递到 ListHome（正在导入并呈现到 Home 中的组件），但我正在努力继续将其传递给正在 ListHome（Slider）中呈现的函数。主要是因为它是一个函数。

我再次查看了文档，但仍在努力理解它应该如何工作。直接 edit/example 会非常有帮助！

我在 App.js 的堆栈中渲染主页。如果您希望我包含此文件，请告诉我。

我比你更欣赏任何见解。

Home.js

export default class Home extends React.Component {
 
  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}}>
        <ListHome
          renderMap = {this.goToMap.bind(this)}
          renderList = {this.goToList.bind(this)}
        />

列表Home.js

export default class ListHome extends React.Component {
  
  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;

  //animation code I removed that uses the above const and let


  return (
    //code I removed that just creates a button. 
    //The touchable opacity is how I want to use the state.
    <TouchableOpacity onPress={() => this.goToMap}>

    </TouchableOpacity>
  );
}


export default Slider

Answer 1

你可以把props钻到组件上，我用功能组件重写了代码。未测试。

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

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

  return(
     { (whichComponentToShow === 'Screen1') ? (
       <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
        <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;

  //animation code I removed that uses the above const and let


  return (
    //code I removed that just creates a button. 
    //The touchable opacity is how I want to use the state.
    <TouchableOpacity onPress={renderMap}>

    </TouchableOpacity>
  );
}

Answer 2

您的状态和状态设置回调被定义为 Home class 组件中的 class 方法。您可以使用 this.goToMap 和 this.goToList 访问它们，并将它们作为组件道具传递给 ListHome。

在 ListHome class 组件中，您可以使用 this.props.renderMap 和 this.props.renderList 访问每个组件，因为道具就是这样命名的。

在 Slider 功能组件中，您可以使用 props.renderMap 和 props.renderList 访问每个组件，因为这是道具的名称（注意缺少 this 访问功能组件中的道具）。

这通常称为螺旋钻。您只是将 a 引用 从 App -> ListHome -> Slider 一路向下传递给原始函数，这样它最终可以已执行。

下路不用重新定义这个函数。你所说的只是当有 onPress/onClick 事件时，执行函数。而你要执行的函数就是Home.

中定义的函数

import "./styles.css";
import React from "react";

export default class Home extends React.Component {
  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>
          state:
          <pre>{JSON.stringify(this.state, null, 2)}</pre>
          <ListHome renderMap={this.goToMap} renderList={this.goToList} />
        </div>
      );
    } else {
      return (
        <div style={{ backgroundColor: "pink", flex: 1 }}>
          <h1>home - screen 2</h1>
          state:
          <pre>{JSON.stringify(this.state, null, 2)}</pre>
          <ListHome renderMap={this.goToMap} renderList={this.goToList} />
        </div>
      );
    }
  }
}

class ListHome extends React.Component {
  render() {
    return (
      <div style={{ backgroundColor: "#ddd", flex: 1 }}>
        <h2>ListHome</h2>
        ListHome
        <Slider
          renderMap={this.props.renderMap}
          renderList={this.props.renderList}
        />
      </div>
    );
  }
}

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

将状态从父组件传递到子函数

Passing state from parent component to child function

javascript

reactjs

react-native

react-props

react-state