只需通过props将父组件的setState函数传递给子组件。

function ParentComp() {
  const [searchValue, setSearchValue] = useState("");
  return <SearchBox setSearchValue={setSearchValue} searchValue={searchValue} />;
}

然后在子组件中:

function SearchBox({ searchValue, setSearchValue }) {
  return (
        <input
          id="search-post"
          type="text"
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          placeholder="Search Blogs ..."
        />
    )
}

处理子组件点击的第二个例子:

// We've below function and component in parent component
const clickHandler = (val) => {
  alert(`httpRequest sent. \nValue Received: ${val}`);
};

// JSX
<HttpRequest clickHandler={clickHandler} />

这就是你如何从父组件中获取函数，然后传递一个值并通过它触发clickHandler。

function HttpRequest({ clickHandler }) {
  const [content, setContent] = useState("initialState");

  return (
    <button onClick={() => clickHandler(content)}>
      Send Request
    </button>
  );
}

export default HttpRequest;

当您需要在子节点和父节点之间进行任何级别的通信时，最好利用上下文。在父组件中定义可以被子组件调用的上下文，例如:

在父组件中，在你的案例中，组件3，

static childContextTypes = {
    parentMethod: React.PropTypes.func.isRequired
};

getChildContext() {
    return {
        parentMethod: (parameter_from_child) => this.parentMethod(parameter_from_child)
    };
}

parentMethod(parameter_from_child){
    // Update the state with parameter_from_child
}

现在在子组件中(在你的例子中是组件5)，只需告诉这个组件它想要使用它的父组件的上下文。

static contextTypes = {
    parentMethod: React.PropTypes.func.isRequired
};

render() {
    return(
        <TouchableHighlight
            onPress = {() => this.context.parentMethod(new_state_value)}
            underlayColor='gray' >

            <Text> update state in parent component </Text>

        </TouchableHighlight>
)}

您可以在这个GitHub存储库中找到Demo项目。

我们可以创建ParentComponent并使用handleInputChange方法来更新ParentComponent的状态。导入ChildComponent并将两个道具从父组件传递给子组件，即handleInputChange函数和count。

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      count: '',
    };
  }

  handleInputChange(e) {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const { count } = this.state;
    return (
      <ChildComponent count={count} handleInputChange={this.handleInputChange} />
    );
  }
}

现在我们创建了ChildComponent文件，并将其保存为ChildComponent.jsx。这个组件是无状态的，因为子组件没有状态。我们使用prop-types库进行道具类型检查。

import React from 'react';
import { func, number } from 'prop-types';

const ChildComponent = ({ handleInputChange, count }) => (
  <input onChange={handleInputChange} value={count} name="count" />
);

ChildComponent.propTypes = {
  count: number,
  handleInputChange: func.isRequired,
};

ChildComponent.defaultProps = {
  count: 0,
};

export default ChildComponent;

要设置子进程中父进程的状态，可以使用回调函数。

const Child = ({handleClick}) => (
    <button on click={() => handleClick('some vale')}>change value</button>
)

const parent = () => {
    const [value, setValue] = useState(null)

    return <Child handleClick={setValue} />
}

在你的结构中，组件1和组件3似乎是兄弟。所以你有三个选择:

1-将状态放入它们的父级(不推荐4层父子级)。

2-同时使用useContext和useRducer(或useState)。

3-使用状态管理器，如redux, mobx…

关于你的问题，我理解你需要在Component 3中显示一些基于Component 5状态的条件数据。方法:

组件3的状态将保存一个变量来检查组件5的状态是否有该数据 一个箭头函数，它将改变组件3的状态变量。 向组件5传递一个带有道具的箭头函数。 组件5有一个箭头函数，它将改变组件3的状态变量 组件5的箭头函数在加载自身时调用

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> Class Component3 extends React.Component { state = { someData = true } checkForData = (result) => { this.setState({someData : result}) } render() { if(this.state.someData) { return( <Component5 hasData = {this.checkForData} /> //Other Data ); } else { return( //Other Data ); } } } export default Component3; class Component5 extends React.Component { state = { dataValue = "XYZ" } checkForData = () => { if(this.state.dataValue === "XYZ") { this.props.hasData(true); } else { this.props.hasData(false); } } render() { return( <div onLoad = {this.checkForData}> //Conditional Data </div> ); } } export default Component5;

我们可以通过将一个函数作为props传递给子组件来设置子组件的父状态，如下所示:

class Parent extends React.Component{
    state = { term : ''}

     onInputChange = (event) => {
         this.setState({term: event.target.value});
     }

     onFormSubmit = (event) => {
         event.preventDefault();
         this.props.onFormSubmit(this.state.term);
     }

     render(){
         return (
             <Child onInputChange={this.onInputChange} onFormSubmit=
                {this.onFormSubmit} />
         )
     }
}


class Child extends React.Component{

     render(){
         return (
             <div className="search-bar ui segment">
                 <form className="ui form" onSubmit={this.props.onFormSubmit}>
                     <div class="field">
                         <label>Search Video</label>
                         <input type="text" value={this.state.term} onChange=
                             {this.props.onInputChange} />
                     </div>
                 </form>
             </div>
         )
     }
}

这样，子进程将更新父进程的状态onInputChange和onFormSubmit是父进程传递的道具。这可以从子进程中的事件侦听器调用，因此状态将在那里更新。