Question

想象一下您正在使用containment，但是突然之间您需要中间组件才能与其包含的子组件进行交互。

在响应文档中，他们说：

如果孩子需要在渲染之前与父母沟通，则可以使用渲染道具进一步完善
。

这是我的情况，我需要Top和Intermediate组件来控制Bottom组件的道具（不同）。

知道Top包含Intermediate组件，其中包含Bottom组件（html层次结构）。

这里有一些玩法（按下按钮）： https://stackblitz.com/edit/react-props-not-rendering-issue?file=src/App.js

等同于打字稿：

import React, {useState} from 'react';

export function Top() {
  const [a, sA] = useState(false);

  function renderBottom(b: boolean) {
    return (
        <Bottom a={a} b={b}/>
    );
  }

  return (
      <div>
        <div>A in TOP: {a ? 'true' : 'false'}</div>
        <button onClick={e => sA(!a)}>A</button>
        <Intermediate renderBottom={renderBottom}/>
      </div>
  );
}

export function Intermediate(p: {renderBottom: any}) {
  const [b, sB] = useState(false);

  const BottomComponentWithASet = p.renderBottom;

  return (
      <div style={{background: 'red'}}>
        <div>B in Intermediate: {b ? 'true' : 'false'}</div>
        <button onClick={e => sB(!b)}>B</button>
        <BottomComponentWithASet b={b}/>
      </div>
  );
}

export function Bottom(p: {a: boolean; b: boolean; }) {
  console.log(p.b); // is correct, start false, change to true on click
  return (
      <div>
        <div>A: {p.a ? 'true' : 'false'}</div>
        {/* this one bellow will alway stay true */}
        <div>B: {p.b ? 'true' : 'false'}</div>
      </div>
  );
}

我知道我可以将b和a的状态处理到Top组件中。我从此开始，但是它迫使我将大量代码与Top组件相关联。{p>

这是我以前使用过的，可以正常工作。但是，它在Intermediate组件中添加了很多代码，它们都与Top组件有关（示例只是一个简单表示）。

Intermediate

Answer 1

好吧，好像只是将其发布在stackoverflow上一样，正在帮助我发现代码中的错误。通过重新阅读Render Props doc，我意识到我已经用组件代替了函数。下面的代码使它起作用。

export function Intermediate(p: {renderBottom: any}) {
  const [b, sB] = useState(false);

  return (
      <div style={{background: 'red'}}>
        <div>B in Intermediate: {b ? 'true' : 'false'}</div>
        <button onClick={e => sB(!b)}>B</button>
        {p.renderBottom(b)}
      </div>
  );
}

这让我想起了JavaScript中不存在class关键字的日子，我们使用函数来声明它们。也许有一天我们会有一个component关键字，这样我们就不会像我一样将功能与组件混淆了。

与渲染道具反应-组件更改时组件不会更新

1 个答案: