Question

我认为问题已在这里得到解答，但我还没有得到它。

How to pass props to react component through routing using react-router?

我希望用户搜索并将该值传递给父组件，以便我可以在整个应用程序中将其用作状态。

// App.js
const App = ({ children }) => (
  <div>
    <Grid>
      { children }
    </Grid>
  </div>
);

这是路线。我想在Index.js搜索时更新App.js中的状态（提交表单）。

render(
  <Router history={ browserHistory }>
    <Route path="/" component={ App }>
      <IndexRoute name="index" component={ Index } />

Answer 1

我不知道你的索引组件正在做什么，但通常你会将setState函数传递给子组件，然后调用它，然后触发父组件。即。

//App.js

class App extends Component
{
  return_data = (data) => {
    this.setState(data);
  }

  render()
  {
    <div>
      <Index return_data={this.return_data}
    </div>
  }

}

// Index.js
class Index extends Component
{
  return_data = () => {
    let data = { input: this.input.value }
    this.props.return_data(data);
  }

  render()
  {
     <div>
       <input onChange={this.return_data) ref={(i) => this.input = i} />
     </div>
  }
}

Answer 2

如果你想把状态放在<App>中，那么它需要是一个完整的React组件 - 而不是一个功能组件。假设您进行了转换并创建了一个更新该状态值的回调函数，那么您可能想知道如何将该回调传递给react-router正在加载的子页面。为此，您希望使用React.cloneElement()并执行以下操作：

class App extends Component {
  ...

  state = { searchVal : ''}

  updateSearch(event){this.setState({searchVal : event.target.value})}

  ...

  render(){
    return (
      <div>
        <Grid>
          { React.cloneElement(this.props.children, {
              searchVal : this.state.searchVal,
              updateSearch : this.updateSearch 
          }) }
        </Grid>
      </div>
    )
  }

);

使用React Router v3将值传递给父组件

2 个答案: