Question

我有一个简化的反应结构，如下所示，我希望MyGrandChildComponent根据MyParentComponent的'list'属性的更改重新呈现。我可以看到列表在MyParentComponent和MyChildComponent中采用了新值。但是，它甚至没有命中MyGrandChildComponent的返回函数。我在这里想念东西吗？

const MyGrandChildComponent = (props) => {
    return (
        <div>props.list.listName</div>
    );
};
const MyChildComponent = (props) => {
    return (
        <div><MyGrandChildComponent list={props.list}/></div>
    );
}

const MyParentComponent = (props) => {
    const list = { listName: 'MyList' };
    return (
        <div><MyChildComponent list={list} /></div>
    );
}

Answer 1

const MyGrandChildComponent = (props) => {
    return (
        <div>{props.list.listName}</div>
    );
};

您忘记了{}周围的props.list.listName

Answer 2

在您的MyParentComponent中，列表不是状态变量，因此更改列表甚至不会导致重新呈现。如果您绝对希望在每次更改list的值时都会重新渲染它，那么您将希望将状态带入功能组件，并且使用钩子来实现此目的。在这种情况下，您的父组件将类似于

import React, {useState} from 'react'
const MyParentComponent = (props) => {
    const [list, setList] =  useState({ listName: 'MyList' });
    return (
        <div><MyChildComponent list={list} /></div>
    );
}

然后在子组件上按照我在上面的注释中的建议进行渲染。

父级需要将列表保留为状态变量，而不仅仅是局部变量。这是因为react根据状态或属性更改重新渲染，并且在父级只能将其保持在该状态。这样，当列表的值更改时，将进行重新渲染，然后将更改归还给子孙。同样，在功能组件中保持状态的唯一方法是使用钩子。

从父级更改传入的道具时，React子级组件不会重新呈现

2 个答案: