如果我将一个组件作为道具传递，它什么时候会被渲染？
如果将一个组件作为道具传递，它会在父组件重新渲染时被渲染。
当父组件的状态或属性发生变化，导致父组件重新渲染时，传递给子组件的道具也会被重新传递并渲染。这是因为React中的组件渲染是基于组件的状态和属性的变化来触发的。
在父组件重新渲染时，React会对子组件进行虚拟DOM的比对，判断是否需要重新渲染子组件。如果子组件的道具发生了变化，React会重新渲染该子组件，并更新相应的DOM元素。
需要注意的是，即使父组件重新渲染，但如果传递给子组件的道具没有发生变化，子组件不会重新渲染。这是因为React会进行浅比较，只有道具的引用发生变化时才会触发重新渲染。
总结起来，当将一个组件作为道具传递给另一个组件时，它会在父组件重新渲染时被渲染，前提是传递给子组件的道具发生了变化。这种方式可以实现组件之间的数据传递和动态渲染，提高了组件的复用性和灵活性。
腾讯云相关产品推荐：
- 云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：腾讯云云服务器
- 云函数（SCF）：无服务器计算服务，支持按需运行代码，实现函数级别的弹性扩缩容。详情请参考：腾讯云云函数
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于各类应用场景。详情请参考：腾讯云云数据库MySQL版
- 腾讯云CDN：内容分发网络服务，加速静态资源的传输，提升用户访问体验。详情请参考：腾讯云CDN
相关·内容
我有一个React应用程序。在我的应用中，我通常希望我的视图组件不直接导入其他react组件。相反，我希望视图的父容器组件负责收集依赖项，并通过props将它们注入视图。}const View = props => ( {props.component}) 但请注意，当将</em
浏览 20提问于2019-06-05得票数 1
回答已采纳
如果我尝试以这种方式将一个带参数的函数作为道具从Parent组件传递到Child组件：每次重新渲染父组件时，子组件都会重新渲染，因为它会在每次渲染中创建函数。将函数作为带参数的<
浏览 0提问于2019-05-15得票数 0
2回答
我有三个文件: App.js、A.js和B.js。A和B是在App.js中使用的功能组件。在A.js中，我有一个foo()函数，在这个函数中，我想强制B.js重新呈现。 你知道怎么做吗？我在谷歌上搜索了这个问题，发现我可以在B.js中设置状态并更新该状态。但是如何在A.js中从foo()更新这个外部状态呢？
浏览 18提问于2021-09-06得票数 0
回答已采纳
1回答
我试着通过 使用道具 函数，但它返回 this.props.isAuthed不是函数 ..。我的终极目标是能够通过 作为我的道具 App.js 制造 注销 按钮的出现和消失取决于用户是否登录。} return (Hello, {this.state.user}); }
export default Dashboard; 在父App.js组件中，如下所示： 它调用函数 checkIfAuthed(isLo
浏览 26提问于2021-03-01得票数 0
回答已采纳
假设我有一个PureComponent和一堆道具。如果我不使用渲染方法中的每一个道具，它会影响任何东西吗？例如，如果我依赖于每个支柱都调用了componentWillReceiveProps，那么即使不是rendered...it的支柱也仍然会被调用，对吗？
我无法想象那些有反应的作者还在做什么..。我可能会找到代码并亲自看一眼，如果我<
浏览 0提问于2018-01-22得票数 0
回答已采纳
从React Hooks FAQ中，我们了解到钩子可以替换HOCs并呈现返回/呈现单个组件的道具。 我试图更好地理解这一点，以及为什么这是一个事实。让我们先来看看HOC： HOC是一个函数，它将组件作为参数，将其包装在周围的逻辑中，如效果和状态，并返回一个新的组件。自定义钩子到底是如何取代它的呢？我们仍然需要用其他逻辑包装输入函数的函数。查看渲染道具： 呈现道具<
浏览 8提问于2019-06-03得票数 7
回答已采纳
在为<Formik /> 提供的示例中，我们可以使用以下代码访问子程序中的Formik上下文道具：import { Formik } from '<button type="submit">Submit</button> )} </div>我很难理解这
浏览 4提问于2019-12-05得票数 0
回答已采纳
我使用react-scroll让用户在点击时顺畅地向下移动，但有一个问题。
为什么每次点击animateScroll.scrollToBottom都会创建额外的事件监听器(3到5个)？卸载组件后，事件侦听器不会被删除。
浏览 7提问于2021-05-13得票数 0
3回答
假设我有一个主组件，它使用两个子组件，我想把一个造型对象支柱传递给那些子组件。有没有办法传递这些道具而不直接将它们传递给主组件，因为这些道具不是与主组件直接关联，而是与子组件直接关联。<MainComponent subComponentStyling={} />
我想，
浏览 6提问于2018-06-22得票数 2
回答已采纳
1回答
我有一个react类，其中我需要使用shouldComponentUpdate()，以防止组件和其父组件之间的无限循环。我只是简单地检查nextProps的深度克隆是否等于this.props，如果不是，我只更新组件。 // some code that might trigger onComponentUpdate()
</
浏览 3提问于2017-11-10得票数 1
我目前正在更新一个没有Redux的React项目到一个Redux。正如您所预期的那样，每个组件都有自己的状态，并传递道具。在实现Redux的过程中，我能够消除将道具传递到子组件的所有传递。但是，我有点不明白我应该如何处理仅用于该组件的组件状态项。我认为我应该把它们留在原样上，
浏览 2提问于2020-07-13得票数 1
回答已采纳
1回答
我有以下react组件： <div className="App">
</HashRouter>
并且NavBar组件</
浏览 2提问于2018-01-24得票数 0
我很难理解什么时候应该将道具传递给子组件，而不是将这些组件直接连接到状态。1)将组件(子组件或父组件)连接到redux的全局状态。这允许我指定我的组件将接收全局状态的哪些部分，但当属性发生变化时将重
浏览 0提问于2018-09-20得票数 4
1回答
我正在构建一个小的web应用程序来学习反应，并暴露在一个问题中。我的任务是单击一个特定的城市名称，然后转到显示该城市名称的另一个组件。
在第二个组件上，我有一个模式对话框，我可以在其中更改城市的名称。执行此操作时，我的组件仍然显示旧的城市名称，而不是我从模式对话框中选择的新城市名称。当我手动刷新页面时，它确实显示了那个新名称。<
浏览 2提问于2018-09-28得票数 2
1回答
考虑以下简单的组件： return ( return ( );据我所理解，用React.memo()包装组件将确保它只有在其道具发生更改时
浏览 0提问于2019-04-16得票数 2
回答已采纳
void componentWillReceiveProps()<ArticleDetails articleDetails={this.state.details}></ArticleDetails>
ArticleDetails组件
浏览 3提问于2016-10-02得票数 0
回答已采纳
我有一个无状态函数，它为Redux/React Native应用程序返回一个组件。) } </View>};
每当我的Redux状态发生变化时，它的变化都会按预期扩散到如果我试图将props作为参数传递给容器中的saveEditedTask
浏览 0提问于2016-12-19得票数 1
我尝试在App.js中为经过身份验证的用户添加受保护的路由，但react元素被多次呈现。下面是我的App.js代码 class App extends Component { super(props);
this.state =
浏览 53提问于2021-04-09得票数 2
回答已采纳
我有下面的<FontAwesomeIcon data-testid="add-ma-detail-row-one" onClick={() => addMaDetailRow(1)} icon={faPlusCircle} />，它调用下面的函数 const [toggleMADetailsRowOne, setToggleMADetailsRowOne] = useState(false); } e
浏览 83提问于2020-07-07得票数 0
3回答
我正在尝试将类组件重写为函数。通常，我有一个增强的组件作为类属性： class Grid extends Component {
<TableCell paging={params => <TableCell {...params} />
return <Table tableCell={tableCell}
浏览 28提问于2019-04-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
