reactjs - react 。如何在 prop 上定义的组件内传递 props？

Question

如果我们在 React 应用程序上有以下结构:

class BasePage extends React.Component {

    render() {
        return <div>
            {this.props.header}
            {/*<Header title={this.props.title} />*/}
        </div>
    }
}

BasePage.defaultProps = {
    header: <header>Base Page</header>
}

class Header extends React.Component {

    render() {
        return <header>
            <h1>{this.props.title}</h1>
        </header>
    }
}

class TestPage extends BasePage {
}

TestPage.defaultProps = {
    header: <Header />
}

class Root extends React.Component {

  render() {
    return <div>
            <TestPage
                title="Test Page Title"
            />
    </div>
  }
}

ReactDOM.render(
    <Root />,
    document.getElementById('root')
)

如果我们有一个常见组件，例如 <Header />我们可以轻松传递标题属性，例如 <Header title={this.props.title} /> .

但是如果组件本身被定义为 props，我们如何在组件内部传递 props 呢？

例如，我们怎样才能做这样的事情:

{this.props.header title={this.props.title}}

那么它会正确渲染测试页面标题？

重要提示:我们可以覆盖 Test 组件内的 render 方法。但这道题的目的就是为了解决这个问题，而不是这样做。

Answer 1

首先， props are read-only并且组件永远不应该更新它自己的 props ，所以像这样的行

componentWillMount() {
    this.props.header = <header>Base Page</header>
}

不应使用

。 defaultProps 可以做我认为你想做的事情:

class BasePage extends React.Component {
    render() {
        return <div>
            {this.props.header}
            {/*<Header title={this.props.title} />*/}
        </div>
    }
}

BasePage.defaultProps = {
    header: <header>Base Page</header>
}

其次，inheritance is not often done in React 。我并不是说不要做你正在做的事情，而是采取 read of the docs看看是否有更简单的方法来实现相同的目标。

最后，在作为 props 传递的组件上设置 props。有几种不同的方法可以做到这一点。

如果您通过Component而不是<Component />您可以像平常一样添加 Prop :

ChildComponent = (props) => {
  const HeaderComponent = props.header
  return <HeaderComponent title="..." />
}

ParentComponent = () => <ChildComponent header={Header} />

您可以clone the element覆盖 Prop :

ChildComponent = (props) => {
  const HeaderComponent = React.cloneElement(props.header. { title: "..." })
  return <HeaderComponent />
}

ParentComponent = () => <ChildComponent header={<Header />} />

注意:我使用过functional components instead of class components为简洁起见，但概念是相同的。