ฉันจะรวมองค์ประกอบไว้ใน JSX ได้อย่างไร นี่คือตัวอย่างการใช้แบนเนอร์ที่ควรอยู่ในส่วนประกอบหากผ่านไปแล้วสิ่งที่ฉันต้องการหลีกเลี่ยงคือการทำซ้ำแท็ก HTML ในคำสั่ง 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>
    );
}

เพียงแค่ปล่อยให้แบนเนอร์เป็นไม่ได้กำหนดและมันจะไม่รวม

เกี่ยวกับสิ่งนี้ เรามากำหนดIfองค์ประกอบช่วยง่ายๆ

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

และใช้วิธีนี้:

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>
    );
}

UPDATE:เนื่องจากคำตอบของฉันกำลังได้รับความนิยมฉันรู้สึกว่าต้องเตือนคุณเกี่ยวกับอันตรายที่ใหญ่ที่สุดที่เกี่ยวข้องกับโซลูชันนี้ ดังที่ได้อธิบายไว้ในคำตอบอื่น ๆ รหัสภายใน<If />ส่วนประกอบจะถูกดำเนินการเสมอโดยไม่คำนึงว่าเงื่อนไขเป็นจริงหรือเท็จ ดังนั้นตัวอย่างต่อไปนี้จะล้มเหลวในกรณีที่bannerเป็นnull(หมายเหตุการเข้าถึงคุณสมบัติบนบรรทัดที่สอง):

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

คุณต้องระวังเมื่อคุณใช้งาน ฉันขอแนะนำให้อ่านคำตอบอื่น ๆ สำหรับแนวทางที่ปลอดภัยกว่า

ปรับปรุง 2:มองย้อนกลับไปวิธีการนี้ไม่เพียง แต่อันตรายเท่านั้น แต่ยังยุ่งยากอย่างยิ่ง เป็นตัวอย่างโดยทั่วไปเมื่อนักพัฒนาซอฟต์แวร์พยายามที่จะถ่ายโอนรูปแบบและวิธีการที่เขารู้จักจากพื้นที่หนึ่งไปยังอีกพื้นที่หนึ่ง แต่มันไม่ได้ผลจริง ๆ (ในกรณีนี้คือเทมเพลตภาษาอื่น)

หากคุณต้องการองค์ประกอบตามเงื่อนไขให้ทำดังนี้:

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>
    );
}

หากคุณต้องการสาขาอื่นเพียงใช้ผู้ประกอบการที่ประกอบไปด้วย:

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

สั้นกว่าหรูหราและปลอดภัยกว่า ฉันจะใช้มันตลอดเวลา. ข้อเสียเปรียบเพียงอย่างเดียวคือคุณไม่สามารถelse ifแยกได้ง่าย ๆ แต่โดยทั่วไปแล้วจะไม่เป็นเช่นนั้น

อย่างไรก็ตามนี่เป็นไปได้ที่ต้องขอบคุณตัวดำเนินการเชิงตรรกะใน JavaScript ตัวดำเนินการเชิงตรรกะอนุญาตให้ใช้เทคนิคเล็กน้อยเช่นนี้:

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

โดยส่วนตัวแล้วฉันคิดว่าสำนวนที่ประกอบไปด้วย ( JSX In Depth ) เป็นวิธีที่เป็นธรรมชาติที่สุดที่สอดคล้องกับมาตรฐานของ ReactJs

ดูตัวอย่างต่อไปนี้ ตั้งแต่แรกเห็นมันรกไปหน่อย แต่ก็ใช้งานได้ดี

<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>

คุณอาจจะเขียนมันเหมือน

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

หากคุณstate.bannerเป็นnullหรือundefinedด้านขวาของเงื่อนไขจะถูกข้าม

Ifองค์ประกอบสไตล์เป็นอันตรายเพราะการป้องกันรหัสจะดำเนินการมักจะไม่คำนึงถึงสภาพ ตัวอย่างเช่นนี้จะทำให้เกิดข้อยกเว้น null ถ้าbannerเป็น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>
  );
}

ตัวเลือกอื่นคือการใช้ฟังก์ชั่นแบบอินไลน์ (มีประโยชน์อย่างยิ่งกับคำสั่งอื่น):

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>
  );
}

ตัวเลือกอื่นจากปัญหาการตอบสนอง:

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>
  );
}

&& + รหัสสไตล์ + ส่วนประกอบขนาดเล็ก

ไวยากรณ์การทดสอบอย่างง่าย + การประชุมสไตล์รหัส + ส่วนประกอบที่เน้นเล็ก ๆ สำหรับฉันเป็นตัวเลือกที่อ่านง่ายที่สุด คุณเพียงแค่ต้องใช้ความระมัดระวังเป็นพิเศษของค่า falsy ชอบfalse, หรือ0""

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

สัญกรณ์

ES7 stage-0 ไวยากรณ์ของการทำเครื่องหมายเป็นสิ่งที่ดีมากและฉันจะใช้อย่างแน่นอนเมื่อ IDE ของฉันรองรับอย่างถูกต้อง:

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}/>
}

รายละเอียดเพิ่มเติมที่นี่: ReactJs - การสร้างองค์ประกอบ "If" ... เป็นความคิดที่ดีใช่ไหม

ง่ายสร้างฟังก์ชั่น

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>
  );
}

นี่เป็นรูปแบบที่ฉันติดตามตลอดเวลา ทำให้รหัสสะอาดและเข้าใจง่าย ยิ่งไปกว่านั้นมันช่วยให้คุณสามารถ refactor Bannerเป็นองค์ประกอบของตัวเองถ้ามันมีขนาดใหญ่เกินไป (หรือนำมาใช้ในที่อื่น ๆ )

doไวยากรณ์ES7 รุ่นทดลองทำให้ง่ายขึ้น หากคุณใช้ Babel ให้เปิดใช้งานes7.doExpressionsคุณสมบัตินี้:

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

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

ดังที่ได้กล่าวไปแล้วในคำตอบ JSX นำเสนอคุณด้วยสองตัวเลือก

• ผู้ประกอบการที่สาม

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

• ข้อต่อเชิงตรรกะ

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

price == 0อย่างไรก็ตามผู้ที่ไม่ได้ทำงาน

JSX จะเรนเดอร์สาขาเท็จในกรณีแรกและในกรณีของการรวมเชิงตรรกะจะไม่มีการแสดงผลใด ๆ ถ้าคุณสมบัติอาจเป็น 0 ให้ใช้ถ้าข้อความภายนอก JSX ของคุณ

องค์ประกอบนี้จะทำงานเมื่อคุณมีมากกว่าหนึ่งองค์ประกอบใน "if" branch:

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

การใช้งาน:

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>
  );
}

ใครบางคนคิดว่าองค์ประกอบเหล่านี้ไม่ดีสำหรับการอ่านรหัส แต่ในใจของฉัน Html กับจาวาสคริปต์นั้นแย่กว่า

ตัวอย่างส่วนใหญ่มี "html" หนึ่งบรรทัดที่แสดงผลแบบมีเงื่อนไข ดูเหมือนว่าฉันจะอ่านได้เมื่อฉันมีหลายบรรทัดที่ต้องแสดงผลตามเงื่อนไข

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>
  );
}

ตัวอย่างแรกดีเพราะแทนที่จะทำให้nullเราสามารถแสดงเนื้อหาอื่น ๆ ตามเงื่อนไขได้{this.props.showContent ? content : otherContent}

แต่ถ้าคุณเพียงแค่ต้องแสดง / ซ่อนเนื้อหาสิ่งนี้จะดียิ่งขึ้นตั้งแต่Booleans, Null และ Undefined Are Ignore

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>
  );
}

มีวิธีอื่นคือถ้าองค์ประกอบสำหรับการตอบสนอง :

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>
    );
}

ฉันใช้ช็อตคัตที่ชัดเจนยิ่งขึ้น: นิพจน์ฟังก์ชันที่เรียกใช้ทันที (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})}/>
  }
})()}

ฉันสร้างhttps://www.npmjs.com/package/jsx-control-statementsเพื่อให้ง่ายขึ้นเล็กน้อยโดยทั่วไปจะช่วยให้คุณกำหนด<If>เงื่อนไขเป็นแท็กจากนั้นรวบรวมเป็น ternary ifs เพื่อให้โค้ดภายในที่<If>ได้รับเท่านั้น ดำเนินการหากเงื่อนไขเป็นจริง

นอกจากนี้ยังมีเวอร์ชันหนึ่งบรรทัดที่สะอาดจริงๆ ... {this.props.product.title || "ไม่มีชื่อเรื่อง" }

เช่น:

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

ฉันทำhttps://github.com/ajwhite/render-ifเมื่อเร็ว ๆ นี้ได้อย่างปลอดภัยทำให้องค์ประกอบเฉพาะในกรณีที่ผ่านการวินิจฉัย

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

หรือ

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

//...

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

คุณสามารถรวมองค์ประกอบต่างๆโดยใช้เงื่อนไขประกอบการที่ประกอบไปด้วย:

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>
}

คุณสามารถใช้ฟังก์ชั่นและคืนองค์ประกอบและทำให้ฟังก์ชั่นการเรนเดอร์บางลง

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 />
    }
  }
}

นี่คือวิธีการของฉันโดยใช้ 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'));

สาธิต: http://jsfiddle.net/kb3gN/16688/

ฉันใช้รหัสเช่น:

{opened && <SomeElement />}

ที่จะแสดงSomeElementเฉพาะในกรณีที่openedเป็นจริง มันทำงานได้เนื่องจากวิธีที่ JavaScript แก้ไขเงื่อนไขเชิงตรรกะ:

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

ในฐานะที่Reactจะไม่สนใจfalseผมพบว่ามันวิธีที่ดีมากที่จะทำให้เงื่อนไของค์ประกอบบางอย่าง

อาจช่วยคนที่เจอคำถาม: เงื่อนไขการแสดงผลทั้งหมดในการตอบสนองเป็นบทความเกี่ยวกับตัวเลือกต่าง ๆ ทั้งหมดสำหรับการเรนเดอร์ตามเงื่อนไขใน React

ประเด็นสำคัญเมื่อใดที่จะใช้การเรนเดอร์แบบมีเงื่อนไข:

** ถ้า - อื่น

• เป็นการแสดงผลแบบมีเงื่อนไขขั้นพื้นฐานที่สุด
• เริ่มต้นเป็นมิตร
• ใช้ถ้าจะยกเลิกก่อนกำหนดจากวิธีการเรนเดอร์โดยส่งคืน null

** ผู้ประกอบการที่สาม

• ใช้มันมากกว่าคำสั่ง if-else
• มันกระชับกว่า if-else

** ผู้ประกอบการเชิงตรรกะ &&

• ใช้มันเมื่อด้านใดด้านหนึ่งของการดำเนินการแบบไตรภาคจะกลับมาเป็นโมฆะ

** เปลี่ยนเคส

• อย่างละเอียด
• สามารถ inline ด้วยฟังก์ชั่นการเรียกตนเองเท่านั้น
• หลีกเลี่ยงมันใช้ enums แทน

** enums

• สมบูรณ์แบบในการทำแผนที่รัฐต่าง ๆ
• สมบูรณ์แบบในการทำแผนที่มากกว่าหนึ่งเงื่อนไข

** การเรนเดอร์หลายเงื่อนไข / หลายระดับ

• หลีกเลี่ยงพวกเขาเพื่อประโยชน์ในการอ่าน
• แยกส่วนประกอบออกเป็นส่วนประกอบที่มีน้ำหนักเบามากขึ้นด้วยการเรนเดอร์ตามเงื่อนไขของตนเอง
• ใช้ HOCs

** HOCs

• ใช้มันเพื่อป้องกันการเรนเดอร์แบบมีเงื่อนไข
• ส่วนประกอบสามารถมุ่งเน้นไปที่วัตถุประสงค์หลักของพวกเขา

** ส่วนประกอบ templating ภายนอก

• หลีกเลี่ยงพวกเขาและรู้สึกสะดวกสบายกับ JSX และ JavaScript

ด้วย ES6 คุณสามารถทำได้ง่ายๆด้วยซับในเดียว

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

"show" เป็นบูลีนและคุณใช้คลาสนี้ด้วย

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

ฉันไม่คิดว่าสิ่งนี้ถูกกล่าวถึง นี่เป็นเหมือนคำตอบของคุณ แต่ฉันคิดว่ามันง่ายกว่า คุณสามารถส่งคืนสตริงจากนิพจน์ได้ตลอดเวลาและคุณสามารถซ้อน jsx ภายในนิพจน์ได้ซึ่งจะทำให้สามารถอ่านนิพจน์อินไลน์ได้ง่าย

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>

ผมชอบที่แน่ชัดของการแสดงออกฟังก์ชั่นทันที-รื้อฟื้น ( IIFE) และif-elseมากกว่าและrender callbacksternary 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>
  );
}

คุณเพียงแค่ต้องทำความคุ้นเคยกับIIFEไวยากรณ์{expression}เป็นไวยากรณ์ React ปกติภายในเพียงแค่พิจารณาว่าคุณกำลังเขียนฟังก์ชั่นที่เรียกตัวเอง

function() {

}()

ที่ต้องห่อภายใน parens

(function() {

}())

นอกจากนี้ยังมีเทคนิคการใช้อุปกรณ์แสดงผลเพื่อแสดงองค์ประกอบตามเงื่อนไข ประโยชน์ของมันคือการเรนเดอร์จะไม่ประเมินจนกว่าจะตรงตามเงื่อนไขทำให้ไม่ต้องกังวลกับค่าว่างและค่าที่ไม่ได้กำหนด

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>
        )}
      />
    )
  }
}

เมื่อต้องแสดงผลบางอย่างหากเงื่อนไขที่ผ่านนั้นเต็มแล้วคุณสามารถใช้ไวยากรณ์:

{ condition && what_to_render }

โค้ดในลักษณะนี้จะเป็นดังนี้:

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

แน่นอนว่ามีวิธีการอื่นที่ถูกต้องในการทำเช่นนี้ขึ้นอยู่กับความชอบและโอกาส คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการเรนเดอร์แบบมีเงื่อนไขใน React ในบทความนี้หากคุณสนใจ!

เพียงเพื่อเพิ่มตัวเลือกอื่น - ถ้าคุณชอบ / ทนกาแฟสคริปต์คุณสามารถใช้ coffee-react เพื่อเขียน JSX ของคุณในกรณีที่คำสั่ง / else สามารถใช้งานได้เนื่องจากเป็นนิพจน์ในสคริปต์กาแฟและไม่ใช่คำสั่ง:

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

เพียงเพื่อขยาย @Jack Allan ตอบโดยอ้างอิงถึงเอกสาร

ตอบโต้เอกสารพื้นฐาน (Quick Start) ที่แนะนำ nullในกรณีเช่นนี้ อย่างไรก็ตามBooleans, Null และ Undefined จะถูกละเว้นเช่นกันซึ่งถูกกล่าวถึงในคำแนะนำขั้นสูง