基于 Child 道具更改父组件 -> Preact/React

Question

我对编程还很陌生

在下面的示例中，每当子组件呈现 null（...或者换句话说，当 getPosts() 呈现 null 时），我希望父组件 div class 从 className={style.container} 到 className={style.container.minimized}.

重写这段代码使之成为可能的方法是什么。感谢任何帮助。

我有一个这样的父组件

const Parent = () => {
    return (
        <div className={style.root}>
            <div>
                <div className={style.container}>
                    <Child />
                </div>
            </div>
        </div>
    );
};

我的子组件是这样的

const Child = () => {

     <div>
            {getPosts() ? (
                <div>
                    <p>Tomasz from {companyData.companyName}</p>
                    <p>{getPosts()}</p>
                </div>
            ) : null}
        </div>

}

Answer 1

有几种方法可以实现所需的 objective。

下面是一种可能的方式：

Parent

const Parent = () => {
    const [hasPosts, setHasPosts] = React.useState(false);
    return (
        <div className={style.root}>
            <div>
                <div className={hasPosts ? style.container : style.container.minimized}>
                    <Child hasPosts={hasPosts} setHasPosts={setHasPosts} />
                </div>
            </div>
        </div>
    );
};

Child

const Child = ({hasPosts, setHasPosts, ...props}) => {
  // if getPosts() is an API, may choose to make the call
  // within useEffect hook. For simplicity, it is placed as-is below.
  const posts = getPosts();
  if (posts) setHasPosts(true);
  else setHasPosts(false);
  return (<div>
    {hasPosts ? (
      <div>
        <p>Tomasz from {companyData.companyName}</p>
        <p>{posts}</p>
      </div>
    ) : null}
  </div>);
};

说明

在 parent 中声明 hasPosts 和 setHasPosts（使用 useState 钩子）
将两者作为道具传递给 child
在 child 中调用 getPosts() 并将结果存储在本地 posts
如果有帖子，调用setHasPosts设置hasPosts为真；否则将其设置为 false。
在 child 的 JSX

posts

在 parent 的 JSX 中使用 hasPosts 并在 parent

PS：互联网上有大量令人惊叹的资源，它们以更加优雅和信息丰富的方式解释了这些细节。

基于 Child 道具更改父组件 -> Preact/React

Change Parent component based on Child props -> Preact/ React

javascript

reactjs

preact