如何在React功能组件中使组件呈现onClick

Question

我有点惊讶我在网上找不到这个，但我似乎找不到如何在React功能组件中做到这一点的例子。我有一个React组件，我想在单击按钮时渲染它。现在函数启动了，我可以看到我的console.log启动了，但是组件没有渲染。我的第一个猜测是它不会渲染，因为React不知道更新视图，但我通过useState添加了布尔值，它仍然不会渲染。我做错了什么？

以下是相关代码。如何让addSection中的组件进行渲染？

const FormGroup = ({index}) => {
const [additionalSection, setAdditionalSection] = useState(false);
const addSection = form => {
setAdditionalSection(true);
console.log('form', form);
return additionalSection && (
<div key={form.prop}>
<p>This should render</p>
<AdditiveSection
form={form}
register={register}
errors={errors}
/>
</div>
);
};
...
return (
...
<FormAdd>
<LinkButton
type="button"
onClick={() => addSection(form)}
>
span className="button--small">{form.button}</span>
</LinkButton>
</FormAdd>
);

Answer 1

您应该更改您的状态(或者如果您有useEffect依赖数组中的道具，则可以更改该状态(，以便强制重新发布。在这种情况下：

setAdditionalSection(prevState=>！prevState(；

Answer 2

像您正在调用的状态更改将触发重新渲染。

但是，所有要呈现的html都必须包含在功能组件return语句中。要渲染的元素可以有条件地渲染，如下所示：

const FormGroup = ({index}) => {
const [additionalSection, setAdditionalSection] = useState(false);

const addSection = form => {
setAdditionalSection(true);
console.log('form', form);
};
...
return (
...
<FormAdd>
<LinkButton
type="button"
onClick={() => addSection(form)}
>
<span className="button--small">{form.button}</span>
</LinkButton>
{additionalSection && 
<div key={form.prop}>
<p>This should render</p>
<AdditiveSection
form={form}
register={register}
errors={errors}
/>
</div>
}
</FormAdd>
);