css - 是否可以在 ReactJs 中将函数从父组件发送到隐藏的子组件

Question

我有一个父组件，我想从中向我的子组件发送函数。

ParentComponent.js

export default class LandingPage extends React.Component {

    onSearchSubmit(term) {
      console.log(term);
    }

    render() {
        return ( 
          <div>

            <div className = "admin" >
            <SearchBar onSubmit = {this.onSearchSubmit}
            /> 
            </div>
             ....

ChildComponent.js

export default class SearchBar extends React.Component{

    state = {term: ''};

    onFormSubmit = event => {
        event.preventDefault();

        this.props.onSubmit(this.state.term);
    };

    render(){
        return(
            <div>
                <div className="container">

                    <div className="searchBar mt-5">
                        <form onSubmit={this.onFormSubmit}>
                            <div className="form-group">
                            <label for="search">Image search</label>
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    placeholder="Search..." 
                                    value = {this.state.term}
                                    onChange={e => this.setState({term: e.target.value})}
                                />
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        )
    }
}

我正在向我的子组件发送函数，这样我就可以使用搜索栏将用户的输入返回给父组件。如果在父组件上显示和使用子组件，它工作正常。

但是如果我想以一种使用 CSS 将其隐藏在父组件之外的方式处理我的子组件:

.admin{
      display: none;
    }

并像http://localhost:3000/bar一样访问它并在我的搜索栏中输入文本，我收到以下错误:

Uncaught TypeError: _this.props.onSubmit is not a function

是否可以使用 ReactJs 以这种方式发送数据，或者是否有任何其他方式可以在不在父组件中显示子组件的情况下将数据发送到子组件？

更新 - 工作解决方案

我为我的两个页面都添加了父组件。

我已经以这种方式更改了我的应用程序的结构。

在我的应用程序以我的 LandingPage.js 的方式构建之前是 SearchBar.js 的 parent .

这就是为什么我无法让它们之间的通信按照我想要的方式进行。我试图通过从我的登录页面隐藏搜索栏并尝试从 http://localhost:3000/searchbar 发送数据来破解它至 http://localhost:3000/没有任何运气和错误。

在我构建我的应用后 tp 看起来像这样:

我能够在 LandinPage.js 之间发送数据和 SearchBar.js .

App.js 看起来像这样:

export default class App extends React.Component{

  render(){
    return(

    <div>
      <Route path="/" exact component={LandingPage} />
      <Route path="/admin" component={Admin}/>
      <Route path="/posts" component={Post} />
      <Route path="/categories" component={Categories} />
      <Route path="/users" component={Users} />
      <Route path="/details" component={Details} />
      <Route path="/profile" component={Profile} />

      <Route path="/weatherapp" component={weatherApp} />
      <Route path="/bar" component={SearchBar}/>
    </div>
  )
 }
}

制作App.js作为 parent 已将其更改为如下所示:

App.js

export default class App extends React.Component{

  constructor(props){
    super(props)
    this.state = {
        articalName: "Landing page"
    };

}

onSearchSubmit = term => {
  console.log(term);
}

  render(){
    return(

    <div>
      <Route path="/" exact component={LandingPage} />
      <Route path="/admin" component={ () => 
        <Admin 
          title={this.state.articalName}

          />}  
      />
      <Route path="/posts" component={Post} />
      <Route path="/categories" component={Categories} />
      <Route path="/users" component={Users} />
      <Route path="/details" component={Details} />
      <Route path="/profile" component={Profile} />

      <Route path="/weatherapp" component={weatherApp} />
      <Route path="/bar" component={ () => 
        <SearchBar 
          onSubmit={this.onSearchSubmit}

          />}  
         />
    </div>
  )
  }
}

我使用路由将我的数据从 parent 发送给 child 。此示例使用 React Router 4。我只想使用 ReactJs，但我想好的解决方案也可以使用 Redux。

Answer 1

既然你不希望这两个组件之间存在父子关系，那么让它们成为 sibling 并为它们添加一个父组件怎么样!

通过在 SearchBar 组件中进行的任何搜索，您可以将其传递给新的父级，然后再从新的父级传递给之前考虑的父级。