反应路由器和 this.props.children - 如何将状态传递给 this.props.children [英] React router and this.props.children - how to pass state to this.props.children

问题描述

我是第一次使用 React-router，我还不知道如何思考.这是我在嵌套路由中加载组件的方式.

入口点 .js

ReactDOM.render(<路由器历史={hashHistory} ><Route path="/" component={App}><Route path="models" component={Content}></路线></路由器>,document.getElementById('app'));

App.js

 渲染:function() {返回 (<div><标题/>{this.props.children}

);}

所以我的应用程序的子组件是我发送的内容组件.我正在使用 Flux 并且我的 App.js 有状态并监听更改，但我不知道如何将该状态传递给这个.props.children.在使用 react-router 之前，我的 App.js 明确定义了所有子级，因此传递状态很自然，但我现在不知道该怎么做.

解决方案

这个问题归结为，你如何将道具传递给孩子?

2018 年 6 月答案

当今的技术:

• 响应 16+
• React 路由器 4:react-router-dom
• 来自官方文档的渲染道具

---

假设一些有状态的组件:

从 'react' 导入 React从'react-router-dom' 导入 { BrowserRouter, Route }//你制作的一些组件从'./Title'导入标题类 App 扩展了 React.Component {//this.state状态 = { 标题:'foo' }//this.render使成为() {返回 (<浏览器路由器>//当 url 是 `/test` 时，运行这个路由的渲染函数:<Route path="/:foobar" render={//参数是从 `<Route/`> 传递过来的 propsrouteProps =>//渲染标题组件<标题//传递 this.state 值标题={this.state.title}//传递 routeProps 值(url 的东西)page={routeProps.match.params.foobar}//测试"/>}/></BrowserRouter>)}}

这是可行的，因为 this.props.children 是一个函数:

//智能"组件又名容器"类 App 扩展了 React.Component {状态 = { foo: 'bar' }使成为() {返回 this.props.children(this.state.foo)}}//哑"组件又名演示"const 标题 = () =>(<应用程序>{标题=><h1>{title}</h1>}</应用程序>)

codeandbox 示例

我以前不再推荐的老派答案:

使用几个 React 辅助方法，您可以向 this.props.children

添加状态、道具和其他任何内容

render: function() {var children = React.Children.map(this.props.children, function (child) {返回 React.cloneElement(child, {foo: this.state.foo})})返回 <div>{children}</div>}

然后你的子组件可以通过 props 访问它，this.props.foo.

I'm using React-router for the first time and I don't know how to think in it yet. Here's how i'm loading my components in nested routes.

entry point .js

ReactDOM.render(
    <Router history={hashHistory} >
        <Route path="/" component={App}>
            <Route path="models" component={Content}>
        </Route>
    </Router>, 
    document.getElementById('app')
);

App.js

  render: function() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }

So the child of my App is the Content component I sent in. I'm using Flux and my App.js has the state and listens for changes, but I don't know how to pass that state down to this.props.children. Before using react-router my App.js defines all children explicitly, so passing state was natural but I don't see how to do it now.

解决方案

This question boils down to, how do you pass props to children?

June 2018 answer

Today's tech:

• React 16+
• React Router 4: react-router-dom
• Render Props from official docs

---

Assuming some stateful component:

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'

// some component you made
import Title from './Title'

class App extends React.Component {
  // this.state
  state = { title: 'foo' }

  // this.render
  render() {
    return (
      <BrowserRouter>

        // when the url is `/test` run this Route's render function:
        <Route path="/:foobar" render={

          // argument is props passed from `<Route /`>
          routeProps => 

            // render Title component
            <Title 
              // pass this.state values
              title={this.state.title}

              // pass routeProps values (url stuff)
              page={routeProps.match.params.foobar} // "test"
            />

        } />

      </BrowserRouter>
    )
  }
}

This works because this.props.children is a function:

// "smart" component aka "container"
class App extends React.Component {
  state = { foo: 'bar' }
  render() {
    return this.props.children(this.state.foo)
  }
}

// "dumb" component aka "presentational"
const Title = () => (
  <App>
    {title => <h1>{title}</h1>}
  </App>
)

Example on codesandbox

My previous oldschool answer that I wouldn't recommend anymore:

Using a couple of React helper methods you can add state, props and whatever else to this.props.children

render: function() {
  var children = React.Children.map(this.props.children, function (child) {
    return React.cloneElement(child, {
      foo: this.state.foo
    })
  })

  return <div>{children}</div>
}

Then your child component can access this via props, this.props.foo.

这篇关于反应路由器和 this.props.children - 如何将状态传递给 this.props.children的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！