如何在 React 中将 Props 传递给组件答案

【问题标题】：How to Pass Props to a Component in React如何在 React 中将 Props 传递给组件
【发布时间】：2019-03-07 03:07:34
【问题描述】：

我有 2 个页面组件，它们有自己的路线。两个页面都有一个标题组件，它应该根据您所在的页面更改其内容。

如何更改每页标题中的内容？

 return (
        <main className={theme.main}>
            <Header 
                title={this.state.headerTitle}
                boldTitle={this.state.boldTitle}
            />
            <div className={theme.content}>
                <Switch>
                    <Route path={'/page1'} component={Page1} />
                    <Route path={'/page2'} component={Page2} />
                </Switch>
            </div>
            <Footer/>
        </main>
    );

我正在尝试将道具传递给我的路线页面中的标题，如下面的代码所示。

<Route path={'/page2'} component={Page2} currentTitle={this.state.headerTitle} />

更新

我用 import { withRouter } from "react-router"; 和

export default withRouter(Header);

在 Header Component 然后他监听路由，我可以输入路径名来做我需要的事情。

然后，我不需要设置状态，只需监听该 MyComponent 中的路由。签名：this.props.location

【问题讨论】：

标签： reactjs react-component

【解决方案1】：

将标题移到第 1 页和第 2 页中。

<Route path={'/page2'} component={() => <Page2  currentTitle={this.state.headerTitle} 
 />} />

然后在 header 中使用 currentTitle 更改标题。

【讨论】：

【解决方案2】：

将Header放入自己的组件中，分别导入到各个页面组件中。

然后你可以像这样将 props 传递到 header 中，当你在每个页面中调用 Header 时......

import Header from (wherever that component is)

class Page# extends React.component {

other code

render() {
return (
         <div>
           <Header currentTitle="this.state.headerTitle" />
           <rest of code for this page /> 
         </div> 
}

或任何你需要的道具。

【讨论】：

【解决方案3】：

我假设您显示的代码位于某个 React 组件的 render() 方法中，因此您实际上有一个状态。

请注意，Route 标记中的component 属性需要一个没有参数的函数值。要渲染的组件是函数的结果。但是没有什么能阻止你在返回值之前做一些工作。我会尝试这样的事情

<Route path={'/page1'} component={() => {
    this.setState({headerTitle: ...what you want..., boldTitle: ...what you want...})
    return <Page1 />
}}/>

如果Page1 只是一个函数，请将“return”行更改为return Page1()

希望它有所帮助 - 卡洛斯

【讨论】：

谢谢卡洛斯，我把它放了，但没有用。 My Page 1 是一个扩展组件的类。

【解决方案4】：

你可以使用 redux 库作为全局状态

类似的东西

 class Main extends Component{
    render(){
    return (
            <main className={theme.main}>
                <Header 
                    title={this.props.headerTitle}
                    boldTitle={this.state.boldTitle}
                />
                <div className={theme.content}>
                    <Switch>
                        <Route path={'/page1'} component={Page1}/>
                        <Route path={'/page2'}component={Page2}
                        />
                    </Switch>
                </div>
                <Footer/>
            </main>
        )
    }
    const mapStateToProps = state =>{
     return {     headerTitle: state.headerTitle    }
    }
    export default connect(mapStateToProps)(Main)

第1页

 class Page1 extends Component{    
    changeTitle =()=>{
     this.props.actions.changeTitle("title from Page1")
    }
    render(){
    return (
    <div>
    <button onClick={this.changeTitle}>changeTitle</button>
    </div>
    )
    }
    const mapDispatchToProps = (dispatch)=> {
        return {
            actions: bindActionCreators({ changeTitle }, dispatch)
        }
    }
    export default connect(null, mapDispatchToProps)(Page1)

代码不起作用，但这是一个如何使用 redux 实现此目的的想法

【讨论】：

感谢 Davida，但我没有为此使用 redux。