做出反应。如何在道具上定义的组件内传递道具？答案

【问题标题】：React. How to pass props inside a component defined on a prop?做出反应。如何在道具上定义的组件内传递道具？
【发布时间】：2017-06-25 04:09:14
【问题描述】：

如果我们在 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 /> 这样的common 组件，我们可以像<Header title={this.props.title} /> 这样轻松地传递一个标题属性。

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

例如，我们如何做这样的事情：

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

所以它会正确呈现测试页面标题？

重要提示：我们可以覆盖 Test 组件中的 render 方法。但是这个问题的目的是在不这样做的情况下解决这个问题。

【问题讨论】：

嗯，首先你不能分配道具，它们是只读的。其次，this.props.header 只是 JSX，它不需要任何道具。

标签： reactjs

【解决方案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 /> 你可以像往常一样添加道具：

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

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

您可以clone the element 覆盖道具：

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

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

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

【讨论】：

谢谢。事实上，我使用了 componentWillMount 并且我同意这不是推荐的方法（事实是我使用的是 defaultProps 但在这里我使用了这种不好的方法，我将进行编辑）。 const HeaderComponent = props.header 是我要找的。span>

【解决方案2】：

这似乎是React.cloneElement 的一个很好的用例。

React.cloneElement(this.props.header, { title: this.props.title });

它返回包含新道具的组件的克隆。

【讨论】：