前端之家

  1. 首页
  2. 问答

在嵌套组件中使用this.props苦苦挣扎

• 问答

很抱歉，如果这是一个基本问题，但我是新来的反应者/盖茨比，由于我不确定确切的术语，我正努力寻找答案。

我目前正在使用原子设计原则来构建网站。我想在网站上使用原子组件（例如按钮/表单）时更新它们的副本-但是我正在努力使用我所知道的方法来传递数据。

代码设置

Atom / Button组件，文本被这样编码
<button>{this.props.copy}</button>

布局组件，例如英雄横幅，该按钮是使用
导入到布局中的 <section>This is a hero banner <button copy="copy goes here" /></section>

页面组件我想在各个页面上使用布局/英雄组件，我已经导入了布局组件并覆盖了已经在布局组件中定义的按钮文本，但是使用
<layout copy="overwrite the copy">
显然不起作用

是否有一种方法可以将一个组件拉入另一个被调用的组件中，例如<hero <button copy="new copy"/> />并覆盖属性。或者是在可嵌套的原子组件中定义道具的更好方法。因此结构看起来像这样（第三级组件始终处于布局中，很少自己被拉入页面。）

第1页
第2页
├──布局（英雄）
├───────原子（按钮）
├───────Atom（输入）
└───────Atom（选择）

任何帮助将不胜感激。

nwpu_guy 回答：在嵌套组件中使用this.props苦苦挣扎

您在这里有几个选择：

  1. Prop Drilling
  2. Render Props（React docs）。

我要说的是尽可能避免进行Prop Drilling。在大型组件层次结构上，这变得很麻烦。尝试使用呈现道具的更动态的方法，使您可以交换实现而不会引起问题。

道具钻探：

这将涉及将道具沿组件层次结构传递。对于您的用例，看起来像这样

class Layout extends Component {
    render() {
        return (
            <section>
                This is a hero banner <AtomButton copy={this.props.copy} /> 
            </section>
        )
    }
}

class AtomButton extends Component {
    render() {
        return (
            <button>this.props.copy</button>
        )
    }
}

渲染道具：

我在这里显示的实际上不是渲染道具。这只是将组件作为道具向下传递，然后重新设置该组件。我链接的React文档中定义了一个真正的渲染道具。

class Layout extends Component {
    render() {
        return (
            <section> This is a hero banner {this.props.button} /><section>
        )
    }
}

//Wherever your are loading your Layout Component
class Page extends Component {
    render() {
        return (
            <Layout buttonRender={<AtomButton copy="overwrite copy" />} />              
        )
    }
}
gatsbyjsxreactjs
本文链接：https://www.f2er.com/3141824.html

大家都在问