时间戳

首页 > 解决方案 > 在 React 中，如何在渲染之前访问道具（不使用 componentWillReceiveProps）

reactjs - 在 React 中，如何在渲染之前访问道具（不使用 componentWillReceiveProps）

问题描述

我有一个基于从属性转换的数据呈现的组件。具体来说，该组件的属性之一是直接 JSON。然后该 JSON 由组件转换为渲染中使用的实际数据。

所以这是我不明白的一点。如果我更新了我的道具，那么在我有机会转换为数据进行渲染之前，渲染函数就会被调用。我发现 componentWillReceiveProps 功能完美，我可以在渲染之前准备好我的数据。

但是我看到这现在已被弃用，其他建议似乎在他们自己的方式上存在缺陷（在渲染后调用，或者在挂载时不调用等）

我不认为我的用例似乎特别独特，或者也许看到我对 React 的了解我误解了道具的使用，但如果不是，那么为什么这似乎不受支持？

我必须使用哪些选项来使用新数据更新我的组件并在渲染发生之前转换该数据？

为了清楚起见，这就是我正在做的事情。props.data是组件在渲染之前理想地转换的属性。

    let props: IComponentProps = {
        data: context.parameters.json.raw != null ? JSON.parse(context.parameters.json.raw) : undefined,
        node:  context.parameters.node.raw || undefined,
        callback: (x) => console.log(`Got a callback on ${x}`)};

    ReactDOM.render(<FluentUIDetailsListControl {...props} />, container);

标签： reactjs

解决方案

利用

static getDerivedStateFromProps(props, state) {
}

该函数在创建周期中在渲染函数之前触发，并在每次更新后首先触发。

props 变量是传递的道具。

主要是你使用道具来设置状态。

推荐阅读