标签: conditional-rendering

我想只打印我网页的某个部分(所以不打印整个页面).我怎样才能在JSF中实现这一目标？

有没有办法根据用户从selectOneMenu组件中选择的当前值渲染组件？我的selectOneMenu组件填充了一个由两个值组成的枚举,吸烟者和非吸烟者.如果用户选择了吸烟者,我想在其下方呈现一个复选框,让用户检查他们每天抽烟的次数10,20,30 +等.如果用户选择非吸烟者,我也希望相反的工作即复选框不会渲染/消失.

当浏览器的Accept-Language在我的JSF应用程序中是阿拉伯语时,我想在inputText中呈现文本方向rtl(从右到左).当Accept-Language是英语时,用户引入的文本将是dir ="ltr"(从左到右).我该怎么做？

我有一个包含2个组件的JSF页面,一个按钮和面板.该按钮调用jQuery toggle隐藏并显示面板.我希望当页面加载时,面板最初是隐藏的,这样当我第一次按下按钮时,面板就会显示出来.

<p:commandButton onclick="PF('panelMatches').toggle()" value="Matches" type="button" />
<p:panel id="button_panel" widgetVar="panelMatches" closable="true" toggleable="true">
    Matches: 0
</p:panel>

使用此代码,面板始终始终可见.

编辑1（初始）：似乎setState（）回调未按我期望的方式工作。例如：

this.state = {table: true}
this.setState({table: false}, ()=> console.log(this.state.table)); 

当我期望它登出false时，将登出“ true”。

编辑2：我认为我处理下拉请求的方式有问题，这可能会导致大部分问题。因此，我将其标记为已解决，因为Dileep的解决方案应该可以工作。我将在几个小时后更新结果。

编辑3（最终）：我正在使用switch（）语句，该语句以某种方式触发了多种情况并重置了我的状态。

我想我了解问题所在，但是，我不确定如何解决问题。

我想有条件地渲染元素，然后Amchart的create（“ elementID”，chartType）函数可以访问它。我希望通过调用以下函数来渲染下拉列表：

loadBarChart() {
this.setState({ piechart: false, table: false, barchart: true });
var chart = am4core.create("barChartDiv", am4charts.XYChart);
chart.data = this.state.data;

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "schoolname";
categoryAxis.title.text = "Schools";

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Number of Students";
}

并且barChartDiv显示如下：

 {this.state.barchart && (
      <section>
        <h1 style={{ textAlign: "center" }}>School Data</h1>
        <div id="barChartDiv" style={{ width: "100%", height: "500px" }} />
      </section>
 )}

当我选择下拉菜单时，会告诉我barchart为false，然后在出现以下错误后为true：

Instance.js:128 …

我正在尝试找出 React 中的条件渲染。如果用户的观看列表中没有电影，我只想输出一个标题。我认为这样的事情会起作用：

render() {
    return (
        <Container>
            {this.state.watchlist.map(item => {
                if(this.state.watchlist.length > 0) {
                    return (
                        <WatchlistMovie
                            className="watchlist-movie"
                            key={item.id}
                            id={item.id}
                            title={item.title}
                            poster={item.poster}
                            overview={item.overview}
                            rating={item.rating}
                            user={this.props.user}
                        />
                    );
                } else {
                    return <h1>no movies</h1>
                }
            )}}
        </Container>
    );
}

是否可以在语句中使用 OR 运算符编写条件渲染？以避免双重代码。

{regions && || regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions || regionsWithAnimals.regions }
      />
    </div>
  </>
)}

像这样的东西，这当然行不通

编辑：我可以写：

{regions &&  (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions }
      />
    </div>
  </>
)}

及以下：

{regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regionsWithAnimals.regions }
      />
    </div>
  </>
)}

这就是我想要实现的目标，但我调用了同一个组件两次。