Làm cách nào để tôi tùy ý bao gồm một phần tử trong JSX? Dưới đây là một ví dụ sử dụng biểu ngữ nên có trong thành phần nếu nó đã được truyền vào. Điều tôi muốn tránh là phải sao chép các thẻ HTML trong câu lệnh if.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Chỉ cần để lại biểu ngữ là không xác định và nó không được bao gồm.

Cái này thì sao. Hãy xác định một Ifthành phần trợ giúp đơn giản .

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

Và sử dụng nó theo cách này:

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

CẬP NHẬT: Khi câu trả lời của tôi đang trở nên phổ biến, tôi cảm thấy bắt buộc phải cảnh báo bạn về mối nguy hiểm lớn nhất liên quan đến giải pháp này. Như đã chỉ ra trong một câu trả lời khác, mã bên trong <If />thành phần luôn được thực thi bất kể điều kiện là đúng hay sai. Do đó, ví dụ sau sẽ thất bại trong trường hợp bannerlà null(lưu ý quyền truy cập thuộc tính trên dòng thứ hai):

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

Bạn phải cẩn thận khi sử dụng nó. Tôi đề nghị đọc các câu trả lời khác cho các phương pháp thay thế (an toàn hơn).

CẬP NHẬT 2: Nhìn lại, cách tiếp cận này không chỉ nguy hiểm mà còn rất cồng kềnh. Đó là một ví dụ điển hình khi nhà phát triển (tôi) cố gắng chuyển các mẫu và cách tiếp cận mà anh ta biết từ khu vực này sang khu vực khác nhưng nó không thực sự hoạt động (trong trường hợp này là các ngôn ngữ mẫu khác).

Nếu bạn cần một yếu tố có điều kiện, hãy làm như thế này:

render: function () {
    return (
        <div id="page">
            {this.state.banner &&
                <div id="banner">{this.state.banner}</div>}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Nếu bạn cũng cần nhánh khác, chỉ cần sử dụng toán tử ternary:

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

Đó là cách ngắn hơn, thanh lịch hơn và an toàn. Tôi sử dụng nó mọi lúc. Nhược điểm duy nhất là bạn không thể thực hiện else ifphân nhánh dễ dàng nhưng điều đó thường không phổ biến.

Dù sao, điều này là có thể nhờ vào cách các toán tử logic trong JavaScript hoạt động. Các toán tử logic thậm chí cho phép các thủ thuật nhỏ như thế này:

<h3>{this.state.banner.title || 'Default banner title'}</h3>

Cá nhân, tôi thực sự nghĩ rằng các biểu thức ternary hiển thị trong ( JSX In Depth ) là cách tự nhiên nhất phù hợp với các tiêu chuẩn ReactJs.

Xem ví dụ sau. Nó hơi lộn xộn từ cái nhìn đầu tiên nhưng hoạt động khá tốt.

<div id="page">
  {this.state.banner ? (
    <div id="banner">
     <div class="another-div">
       {this.state.banner}
     </div>
    </div>
  ) : 
  null} 
  <div id="other-content">
    blah blah blah...
  </div>
</div>

Bạn cũng có thể viết nó như

{ this.state.banner && <div>{...}</div> }

Nếu bạn state.bannerlà nullhoặc undefined, bên phải của điều kiện được bỏ qua.

Thành Ifphần kiểu là nguy hiểm vì khối mã luôn được thực thi bất kể điều kiện. Ví dụ: điều này sẽ gây ra ngoại lệ null nếu bannerlà null:

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Một tùy chọn khác là sử dụng một hàm nội tuyến (đặc biệt hữu ích với các câu lệnh khác):

render: function () {
  return (
    <div id="page">
      {function(){
        if (this.state.banner) {
          return <div id="banner">{this.state.banner}</div>
        }
      }.call(this)}
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Một lựa chọn khác từ các vấn đề phản ứng :

render: function () {
  return (
    <div id="page">
      { this.state.banner &&
        <div id="banner">{this.state.banner}</div>
      }
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

&& + kiểu mã + các thành phần nhỏ

Cú pháp kiểm tra đơn giản này + quy ước kiểu mã + các thành phần tập trung nhỏ là cho tôi tùy chọn dễ đọc nhất hiện có. Bạn chỉ cần chăm sóc đặc biệt các giá trị giả như false, 0hoặc "".

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

ký hiệu

Cú pháp ký hiệu ES7 giai đoạn-0 cũng rất hay và tôi chắc chắn sẽ sử dụng nó khi IDE của tôi hỗ trợ chính xác:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

Thêm chi tiết tại đây: ReactJs - Tạo thành phần "Nếu" ... một ý tưởng hay?

Đơn giản, tạo một chức năng.

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

Đây là một mô hình cá nhân tôi làm theo tất cả các thời gian. Làm cho mã thực sự sạch sẽ và dễ hiểu. Hơn nữa, nó cho phép bạn tái cấu trúc Bannerthành thành phần của chính nó nếu nó quá lớn (hoặc được sử dụng lại ở những nơi khác).

doCú pháp ES7 thử nghiệm làm cho điều này dễ dàng. Nếu bạn đang sử dụng Babel, hãy bật es7.doExpressionstính năng này:

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

Xem http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions

Như đã đề cập trong các câu trả lời, JSX trình bày cho bạn hai tùy chọn

• Toán tử ternary

  { this.state.price ? <div>{this.state.price}</div> : null }

• Kết hợp logic

  { this.state.price && <div>{this.state.price}</div> }

Tuy nhiên, những người không làm việc cho price == 0 .

JSX sẽ kết xuất nhánh sai trong trường hợp đầu tiên và trong trường hợp kết hợp logic, sẽ không có gì được hiển thị. Nếu thuộc tính có thể là 0, chỉ cần sử dụng nếu các câu lệnh bên ngoài JSX của bạn.

Thành phần này hoạt động khi bạn có nhiều phần tử bên trong nhánh "if":

var Display = React.createClass({
  render: function () {
    if (!this.props.when) {
      return false;
    }
    return React.DOM.div(null, this.props.children);
  },
});

Sử dụng:

render: function() {
  return (
    <div>
      <Display when={this.state.loading}>
        Loading something...
        <div>Elem1</div>
        <div>Elem2</div>
      </Display>
      <Display when={!this.state.loading}>
        Loaded
        <div>Elem3</div>
        <div>Elem4</div>
      </Display>
    </div>
  );
}

Ps ai đó nghĩ rằng những thành phần này không tốt cho việc đọc mã. Nhưng trong suy nghĩ của tôi, Html với javascript thì tệ hơn

Hầu hết các ví dụ là với một dòng "html" được hiển thị có điều kiện. Điều này dường như có thể đọc được đối với tôi khi tôi có nhiều dòng cần được hiển thị có điều kiện.

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

Ví dụ đầu tiên là tốt vì thay vì null chúng ta có thể đưa ra một số điều kiện nội dung khác như{this.props.showContent ? content : otherContent}

Nhưng nếu bạn chỉ cần hiển thị / ẩn nội dung thì điều này thậm chí còn tốt hơn vì Booleans, Null và Không xác định được bỏ qua

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

Có một giải pháp khác, nếu là thành phần cho React :

var Node = require('react-if-comp');
...
render: function() {
    return (
        <div id="page">
            <Node if={this.state.banner}
                  then={<div id="banner">{this.state.banner}</div>} />
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Tôi sử dụng một phím tắt rõ ràng hơn: Biểu thức hàm được gọi ngay lập tức (IIFE):

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}

Tôi đã tạo https://www.npmjs.com/package/jsx-control-statements để làm cho nó dễ dàng hơn một chút, về cơ bản, nó cho phép bạn xác định các <If>điều kiện dưới dạng các thẻ và sau đó biên dịch chúng thành ifs tạm thời để mã bên trong <If>chỉ nhận được thực hiện nếu điều kiện là đúng.

Ngoài ra còn có một phiên bản một dòng thực sự sạch sẽ ... {this.props.product.title || "Không tiêu đề" }

I E:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

Tôi đã thực hiện https://github.com/ajwhite/render-if gần đây để kết xuất các phần tử một cách an toàn chỉ khi vị ngữ đi qua .

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

hoặc là

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

Bạn có thể bao gồm các phần tử bằng cách sử dụng toán tử ternary như vậy:

render: function(){

         return <div id="page">

                  //conditional statement
                  {this.state.banner ? <div id="banner">{this.state.banner}</div> : null}

                  <div id="other-content">
                      blah blah blah...
                  </div>

               </div>
}

Bạn có thể sử dụng một hàm và trả về thành phần và giữ mỏng chức năng kết xuất

class App extends React.Component {
  constructor (props) {
    super(props);
    this._renderAppBar = this._renderAppBar.bind(this);
  }

  render () {
    return <div>
      {_renderAppBar()}

      <div>Content</div>

    </div>
  }

  _renderAppBar () {
    if (this.state.renderAppBar) {
      return <AppBar />
    }
  }
}

Đây là cách tiếp cận của tôi bằng ES6.

import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {opened && children && (
          <div class="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById('app'));

Bản trình diễn: http://jsfiddle.net/kb3gN/16688/

Tôi đang sử dụng mã như:

{opened && <SomeElement />}

Điều đó sẽ SomeElementchỉ hiển thị nếu openedđúng. Nó hoạt động vì cách JavaScript giải quyết các điều kiện logic:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

Như Reactsẽ bỏ qua false, tôi thấy đó là cách rất tốt để kết xuất có điều kiện một số yếu tố.

Có lẽ nó giúp ai đó bắt gặp câu hỏi: Tất cả các kết xuất có điều kiện trong React Đó là một bài viết về tất cả các tùy chọn khác nhau để kết xuất có điều kiện trong React.

Những điểm chính của thời điểm sử dụng kết xuất có điều kiện:

** nếu khác

• là kết xuất có điều kiện cơ bản nhất
• người mới bắt đầu thân thiện
• sử dụng nếu từ chối sớm từ phương thức kết xuất bằng cách trả về null

** nhà điều hành ternary

• sử dụng nó trên một câu lệnh if-other
• nó ngắn gọn hơn nếu khác

** toán tử && toán tử

• sử dụng nó khi một bên của hoạt động ternary sẽ trả về null

** trường hợp chuyển đổi

• dài dòng
• chỉ có thể được nội tuyến với chức năng tự gọi
• tránh nó, sử dụng enums thay thế

** enum

• hoàn hảo để lập bản đồ các trạng thái khác nhau
• hoàn hảo để lập bản đồ nhiều hơn một điều kiện

** kết xuất đồ họa đa cấp / lồng nhau

• tránh chúng vì mục đích dễ đọc
• tách các thành phần thành các thành phần nhẹ hơn với kết xuất có điều kiện đơn giản của riêng chúng
• sử dụng HOC

** HOC

• sử dụng chúng để che chắn kết xuất có điều kiện
• các thành phần có thể tập trung vào mục đích chính của họ

** thành phần tạo khuôn ngoài

• tránh chúng và cảm thấy thoải mái với JSX và JavaScript

Với ES6, bạn có thể làm điều đó với một lớp lót đơn giản

const If = ({children, show}) => show ? children : null

"hiển thị" là một boolean và bạn sử dụng lớp này bằng cách

<If show={true}> Will show </If>
<If show={false}> WON'T show </div> </If>

Tôi không nghĩ rằng điều này đã được đề cập. Đây giống như câu trả lời của riêng bạn nhưng tôi nghĩ nó thậm chí còn đơn giản hơn. Bạn luôn có thể trả về các chuỗi từ các biểu thức và bạn có thể lồng jsx bên trong các biểu thức, vì vậy điều này cho phép một biểu thức nội tuyến dễ đọc.

render: function () {
    return (
        <div id="page">
            {this.state.banner ? <div id="banner">{this.state.banner}</div> : ''}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script>
<script type="text/jsx;harmony=true">void function() { "use strict";

var Hello = React.createClass({
  render: function() {
    return (
      <div id="page">
        {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''}
        <div id="other-content">
          blah blah blah...
        </div>
      </div>
    );   
  }
});

var element = <div><Hello /><Hello banner="banner"/></div>;
React.render(element, document.body);

}()</script>

Tôi thích nhân chứng của Biểu thức hàm được gọi ngay lập tức ( IIFE) và if-elsehơn render callbacksvà ternary operators.

render() {
  return (
    <div id="page">
      {(() => (
        const { banner } = this.state;
        if (banner) {
          return (
            <div id="banner">{banner}</div>
          );
        }
        // Default
        return (
          <div>???</div>
        );
      ))()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

Bạn chỉ cần làm quen với IIFEcú pháp, {expression}là cú pháp React thông thường, bên trong nó chỉ cần xem xét rằng bạn đang viết một hàm đang tự gọi nó.

function() {

}()

cần phải được bọc bên trong parens

(function() {

}())

Ngoài ra còn có một kỹ thuật sử dụng đạo cụ kết xuất để kết xuất có điều kiện một thành phần. Lợi ích của nó là kết xuất sẽ không đánh giá cho đến khi điều kiện được đáp ứng, dẫn đến không phải lo lắng về các giá trị null và không xác định .

const Conditional = ({ condition, render }) => {
  if (condition) {
    return render();
  }
  return null;
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: null }
  }

  componentWillMount() {
    setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
  }

  render() {
    return (
      <Conditional
        condition={!!this.state.items}
        render={() => (
          <div>
            {this.state.items.map(value => <p>{value}</p>)}
          </div>
        )}
      />
    )
  }
}

Khi phải chỉ hiển thị một cái gì đó nếu điều kiện thông qua đã đầy, bạn có thể sử dụng cú pháp:

{ condition && what_to_render }

Mã theo cách này sẽ trông như thế này:

render() {
    const { banner } = this.state;
    return (
        <div id="page">
            { banner && <div id="banner">{banner}</div> }
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Tất nhiên, có những cách hợp lệ khác để làm điều này, tất cả tùy thuộc vào sở thích và sự xuất hiện. Bạn có thể tìm hiểu thêm các cách về cách thực hiện kết xuất có điều kiện trong React trong bài viết này nếu bạn quan tâm!

Chỉ cần thêm một tùy chọn khác - nếu bạn thích / dung nạp tập lệnh cà phê, bạn có thể sử dụng phản ứng cà phê để viết JSX của mình trong trường hợp nếu các câu lệnh / khác có thể sử dụng được vì chúng là biểu thức trong tập lệnh cà phê và không phải là câu lệnh:

render: ->
  <div className="container">
    {
      if something
        <h2>Coffeescript is magic!</h2>
      else
        <h2>Coffeescript sucks!</h2>
    }
  </div>  

Chỉ cần mở rộng câu trả lời @Jack Allan với các tham chiếu đến tài liệu.

Phản ứng tài liệu cơ bản (Bắt đầu nhanh) gợi ý null trong trường hợp như vậy. Tuy nhiên, Booleans, Null và Không xác định cũng bị bỏ qua , được đề cập trong hướng dẫn nâng cao.