标签: rerender

我有一个JSF页面,我希望在其中有一个复选框,单击该复选框时,将从页面添加/删除某些其他表单字段.这是我目前为复选框提供的(简化)代码:

<h:selectBooleanCheckbox title="showComponentToReRender" value="#{backingBean.showComponentToReRender}">
    <a4j:support event="onsubmit" reRender="componentToReRender" />
</h:selectBooleanCheckbox>

这是我要隐藏的组件的代码:

<h:selectOneMenu id="componentToReRender" value="#{backingBean.value}" rendered="#{valuesList.rowCount>1 &amp;&amp; backingBean.showComponentToReRender}">
   <s:selectItems value="#{valuesList}" var="value"/>
</h:selectOneMenu>

目前,单击复选框不会执行任何操作 "selectOneMenu"不会消失.我究竟做错了什么？

我有一个我称之为back另一个元素的元素front.

Back在CSS中设置以在悬停时更改颜色.Front设置,当悬停时,在1s延迟后消失并且Front元素上的鼠标指针现在位于后面元素上.

Front通过height: 0在JavaScript中设置消失.在Front消失并且鼠标ointer悬停在Back浏览器上之后,不会重新渲染悬停效果Back,导致其颜色未按预期更改.

当我通过自然地Front从DOM中删除它来尝试相同的例子时它工作正常.不过,我的应用程序要求我通过设置来完成此操作height: 0.

您可以在以下示例中自行尝试.你会看到一个红色的盒子和一个蓝色的盒子.红色是Front和蓝色是Back.将鼠标指针移动到红色框时,红色框的颜色会变为green.当您将鼠标移动到蓝色框上时,一秒钟后它将消失.

示例的要点是显示蓝色框消失后,鼠标指针现在悬停在红色框上,因此它应该成为green.

在此示例中,蓝色框完全从DOM中删除,它的工作方式与预期的一样.

但是,在此示例中,将通过设置删除蓝色框height: 0.消失后,green直到我移动鼠标后才会出现红色元素.

有没有办法强制浏览器重新渲染？

问题仍然存在于Google Chrome和Microsoft Edge中.Firefox运行良好.

我的问题是RichFaces reRender不能在元素树中的当前元素下"工作"; 只有上层元素才会被重新渲染.

有没有办法用AJAX访问下层元素？

任何帮助,将不胜感激!丹尼尔

编辑我把这个问题编辑成更普遍的问题.如果对原始问题感兴趣,请参阅修订版.

我有以下问题：我有一个在其中渲染其他组件的组件。该组件之一获取父组件的状态变量作为参数并主动使用它们，但当父组件的状态发生变化时它们不会重新渲染。我面临的另一个问题是，我的列表中有一个附加项，当用户具有特殊的 roleID 时，该导航项会被激活。状态的更改完全正常，但在这种情况下，只有在更改 url 的路径参数后，附加项目才可见。

父组件：

import React, { useEffect, useState } from 'react';
import {Row, Col} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../App.css';
import ProfileSettings from './profileSettings';
import SettingsChooser from './settingsChooser';
// import SettingRoutings from '../settingRoutings';
import {BrowserRouter as Router, useHistory, useLocation, useParams} from 'react-router-dom';
// import Routings from '../Routings.js';
import UserRequests from './userRequests';
import useAuth from '../../API/useAuthentification';
import { CONTROLLERS, useBackend } from '../../hooks/useBackend';

function UserSettings({user}) {

    const {title: path} = useParams();
    const [acst, setAcst] = useState(localStorage.accessToken);
    const [rft, …

我在这里坚持我的渲染论点 - 我非常积极地从记录本身而不是从visualforce页面中提取值.当我将值(are_you_kp__c)从记录更改为"否"时 - 页面块部分应该呈现,但由于某种原因它不会.有人知道为什么吗？

我想我需要一些控制器工作 - 但不知道从哪里开始......

<apex:pageBlock title="New Bid" mode="maindetail" tabStyle="Proposal__c">
    <apex:messages/>
    <apex:actionRegion>
    <apex:pageBlockSection columns="2" title="Bid Information" collapsible="false" showHeader="true">
        <apex:inputField value="{!rfp.Bid_Amount__c}"/>
        <apex:outputField value="{!rfp.Bid_Date__c}"/>
        <apex:inputField value="{!rfp.Bid_Deliver_By__c}"/>
        <apex:inputField value="{!rfp.Bid_Comments__c}"/>
        <apex:pageBlockSectionItem>
               <apex:outputLabel value="Are you the Key Appraiser?"/>
               <apex:outputPanel>             
                   <apex:inputField value="{!rfp.are_you_kp__c}" required="true">
                       <apex:actionSupport status="StatusChange" event="onchange" rerender="PageErrors, appraiserInfo"/>
                       <apex:actionStatus startText="Updating page ..." id="StatusChange"/>
                   </apex:inputField>  
               </apex:outputPanel>
        </apex:pageBlockSectionItem> 
    </apex:pageBlockSection>
    </apex:actionRegion>
    <apex:pageBlockSection title="Testing" columns="2" rendered="{!rfp.are_you_kp__c == 'No'}" id="appraiserInfo">
        <apex:pageBlockSectionItem>
            <apex:outputLabel value="Single Point of Contact" for="spoc"/>
                <apex:selectList id="spoc" value="{!rfp.SPOCL__c}" size="1" title="Single Point of Contact Select">
                    <apex:selectOptions value="{!SPOCS}"></apex:selectOptions> …

我在我的 React 应用程序中使用 Redux，为了确保我不会改变状态而是返回新状态，我在开发中添加了中间件https://github.com/leoasis/redux-immutable-state-invariant。

我的问题是当商店发生变化时，我的所有组件都重新渲染吗？

我正在看这个关于 ImmutableJs 的视频https://youtu.be/YFP8lbdZ0cs?t=33m59s现在我不知道我是否应该在每个带有shallowEqual 函数的组件中实现shouldComponentUpdate 或者这件事是由react 自动完成的？（可能是新版本改了）

它应该打扰我吗？当我不使用 ImutableJs 并使用最新的 React 和 Redux 版本时，最好的方法是什么？

谁能解释一下const rerender = React.useState(0)[1]这是什么？

import React from 'react'
import axios from 'axios'
import {
  useQuery,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

const getCharacters = async () => {
  await new Promise((r) => setTimeout(r, 500))
  const { data } = await axios.get('https://rickandmortyapi.com/api/character/')
  return data
}

const getCharacter = async (selectedChar) => {
  await new Promise((r) => setTimeout(r, 500))
  const { data } = await axios.get(
    `https://rickandmortyapi.com/api/character/${selectedChar}`,
  )
  return data
}

const queryClient = …

我必须使用React js为现有应用程序实现新的UI.这是在单击菜单项后呈现的反应组件.我注意到反应的chrome dev工具插件显示每次单击菜单时创建的新组件.是不是浪费了记忆？这是Sammy.js的菜单激活码

this.get('#/security',function(){
        this.swap("");
        React.render(
           <MainComponent/>,
           document.getElementById('content')
       );
    });

在我的React App的根组件中，我有这个：

class App extends Component {
...
  ComponentDidMount() {
    window.addEventListener('resize', this.handleResize, false);
  }
  handleResize{
    this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
    this.forceUpdate();
  }
  render() {
    <div ref="e=>this.node=e}>
      <ChildComponent parentSize={this.ParentSize} />
    </div>
  }
}

我注意到，当App组件通过setState或forceUpdate（）重新渲染时，实际上会重新安装子组件（因此，每次更新都会调用componentWillUnmount，componentWillMount，componentDidMount）。我期望的行为是仅再次调用Child组件的render函数。我最近升级到了React-router 4.x，所以不确定是否与此相关。

有人可以告诉我这是否是设计使然？多次调用我的componentDidMount会导致一些问题，因为我尝试在其中读取数据，并且我不想在调整大小时一次又一次地执行该昂贵的操作。

更新：

我发现了此问题的可能原因。我有多个嵌套的组件，并且由于很难发布整个项目，所以有时很难发布导致问题的实际代码。但是我认为是这样的：

return (
  <div className="app-view" style={style} ref={el=>this.node=el}>
    <Switch>
      <Route exact path='/' component={() => <Home store={store} />} />
      <Route path='*' component={Error404} />
    </Switch>
  </div>
);

在这里，我试图将道具传递给路线（React-router 4.x）中的组件，方法是提供创建主页的功能，该功能可能会在每次渲染时重新创建主页。

因此问题就变成了，如何在不重新生成Route内每个渲染页面的情况下传递道具？