ฉันกำลังพยายามตั้งค่าReact.jsแอพของฉันเพื่อให้แสดงผลเฉพาะเมื่อตัวแปรที่ฉันตั้งไว้trueเท่านั้น

วิธีการตั้งค่าฟังก์ชั่นการเรนเดอร์ของฉัน:

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>

if(this.state.submitted==false) 
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

โดยทั่วไปส่วนที่สำคัญที่นี่คือif(this.state.submitted==false)ส่วน (ฉันต้องการให้divองค์ประกอบเหล่านี้ปรากฏขึ้นเมื่อตั้งค่าตัวแปรที่ส่งเป็นfalse)

แต่เมื่อใช้งานนี้ฉันได้รับข้อผิดพลาดในคำถาม:

ข้อผิดพลาด uncaught: ข้อผิดพลาดในการแยกวิเคราะห์: บรรทัดที่ 38: องค์ประกอบ JSX ที่อยู่ติดกันจะต้องห่อในแท็กล้อมรอบ

ปัญหาที่นี่คืออะไร และฉันจะใช้อะไรเพื่อทำงานนี้

คุณควรใส่ส่วนประกอบของคุณระหว่างแท็กที่ล้อมรอบซึ่งหมายความว่า:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

แทน:

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

แก้ไข:ความคิดเห็นของ Joe Clay เกี่ยวกับFragments API

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

มันสายไปแล้วที่จะตอบคำถามนี้ แต่ฉันคิดว่ามันจะเพิ่มคำอธิบาย

มันเกิดขึ้นเพราะที่ใดในรหัสของคุณคุณจะคืนสององค์ประกอบพร้อมกัน

เช่น

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

มันควรจะห่อในองค์ประกอบผู้ปกครอง เช่น

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

jsxโค้ดด้านล่างของคุณถูกแปลง

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

ลงในนี้

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

แต่ถ้าคุณทำสิ่งนี้

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
        <div>Hi</div>
    );
  }
}

สิ่งนี้ได้รับการแปลงเป็นสิ่งนี้ (เพียงเพื่อเป็นภาพประกอบเท่านั้นจริงๆแล้วคุณจะได้รับerror : Adjacent JSX elements must be wrapped in an enclosing tag)

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

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

แก้ไข - การเปลี่ยนแปลงล่าสุดใน React 16 และของตัวเอง:

หากคุณไม่ต้องการเพิ่ม div พิเศษเพื่อล้อมรอบและต้องการส่งคืนคอมโพเนนต์ย่อยมากกว่าหนึ่งคอมโพเนนต์ที่คุณสามารถไปReact.Fragmentsได้

React.Fragments เร็วขึ้นเล็กน้อยและมีการใช้หน่วยความจำน้อยลง (ไม่จำเป็นต้องสร้างโหนด DOM พิเศษต้นไม้ DOM ที่รกน้อยกว่า)

เช่น(ในการตอบสนอง 16.2.0)

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

หรือ

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    <React.Fragments/>
  );
}

หรือ

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

องค์ประกอบปฏิกิริยาต้องส่งคืนองค์ประกอบเดียวเท่านั้น คุณจะต้องห่อทั้งสองแท็กของคุณด้วยแท็กองค์ประกอบอื่น

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

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

โปรดทราบว่าคุณไม่สามารถใช้ifคำสั่งด้านในองค์ประกอบที่ส่งคืนได้:

render: function() {
var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    if(this.state.submitted==false) {
        return <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

หากคุณไม่ต้องการห่อมันใน div อื่นเนื่องจากคำตอบอื่น ๆ ได้แนะนำไว้คุณสามารถใส่มันเข้าไปในอาร์เรย์และมันจะใช้ได้

// Wrong!
return (  
   <Comp1 />
   <Comp2 />
)

สามารถเขียนเป็น:

// Correct!
return (  
    [<Comp1 />,
    <Comp2 />]
)

โปรดทราบว่าข้างต้นจะสร้างคำเตือน: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

สิ่งนี้สามารถแก้ไขได้โดยการเพิ่มแอkeyททริบิวต์ให้กับส่วนประกอบหากการเพิ่มเหล่านี้ด้วยตนเองเช่น:

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />]
)

นี่คือข้อมูลเพิ่มเติมเกี่ยวกับคีย์: Composition vs Inheritance

ปัญหา

ข้อผิดพลาดในการแยกวิเคราะห์: องค์ประกอบที่อยู่ติดกันของ JSX จะต้องห่อในแท็กที่ล้อมรอบ

ซึ่งหมายความว่าคุณกำลังพยายามส่งคืนองค์ประกอบ JSX หลาย sibling ในลักษณะที่ไม่ถูกต้อง จำไว้ว่าคุณไม่ได้เขียน HTML แต่เป็น JSX! รหัสของคุณถูกแปลงจาก JSX เป็น JavaScript ตัวอย่างเช่น:

render() {
  return (<p>foo bar</p>);
}

จะถูกเปลี่ยนเป็น:

render() {
  return React.createElement("p", null, "foo bar");
}

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

ดังนั้นหากคุณเคยสงสัยว่าทำไมสิ่งนี้ถึงได้ผล ...

render() {
  return (
    <div>
      <p>foo</p>
      <p>bar</p>
      <p>baz</p>
    </div>
  );
}

แต่ไม่ใช่สิ่งนี้ ...

render() {
  return (
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>
  );
}

มันเป็นเพราะในตัวอย่างแรกทั้ง<p>-elements เป็นส่วนหนึ่งของchildrenของ<div>องค์ประกอบ เมื่อเป็นส่วนหนึ่งchildrenเราสามารถแสดงองค์ประกอบพี่น้องไม่ จำกัด จำนวน ดูว่าวิธีนี้จะ transpile:

render() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "foo"),
    React.createElement("p", null, "bar"),
    React.createElement("p", null, "baz"),
  );
}

โซลูชั่น

คุณมีตัวเลือกไม่กี่ตัวเลือกในการจัดการกับสิ่งนี้:

• ใช้ชิ้นส่วน (ทำปฏิกิริยา v16.2 + เท่านั้น!)

  ตั้งแต่ React v16.2 React มีการสนับสนุนFragmentsซึ่งเป็นส่วนประกอบของโหนดที่ส่งคืนลูก ๆ โดยตรง

  การคืนค่าเด็ก ๆ ในอาร์เรย์ (ดูด้านล่าง) มีข้อบกพร่องบางประการ:

  • เด็กในชุดจะต้องคั่นด้วยเครื่องหมายจุลภาค
  • เด็ก ๆ ในอาร์เรย์จะต้องมีกุญแจเพื่อป้องกันการเตือนที่สำคัญของ React
  • สตริงจะต้องอยู่ในเครื่องหมายคำพูด

  สิ่งเหล่านี้จะถูกกำจัดจากการใช้ชิ้นส่วน นี่คือตัวอย่างของเด็ก ๆ ที่ถูกห่อเป็นชิ้น ๆ :

  render() {
    return (
      <>
        <ChildA />
        <ChildB />
        <ChildC />
      </>
    );
  }

  ซึ่ง de-sugars เป็น:

  render() {
    return (
      <React.Fragment>
        <ChildA />
        <ChildB />
        <ChildC />
      </React.Fragment>
    );
  }

  โปรดทราบว่าตัวอย่างแรกต้องใช้ Babel v7.0 หรือสูงกว่า

  ---

• ส่งคืนอาร์เรย์ (ทำปฏิกิริยา v16.0 + เท่านั้น!)

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

  คุณสามารถทำสิ่งนี้ได้:

  render() {
    return [<p key={0}>foo</p>, <p key={1}>bar</p>];
  }

  transpiles นี้เป็น:

  return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")];

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

  โปรดทราบด้วยว่าสิ่งต่อไปนี้ไม่ถูกต้อง (คุณต้องส่งคืนอาร์เรย์):

  render() {
    return (<p>foo</p> <p>bar</p>);
  }

  ---

• ล้อมรอบองค์ประกอบในองค์ประกอบหลัก

  โซลูชันอื่น ๆ เกี่ยวข้องกับการสร้างส่วนประกอบพาเรนต์ซึ่งล้อมรอบคอมโพเนนต์ sibling ในchildrenนั้น นี่เป็นวิธีที่ใช้กันโดยทั่วไปมากที่สุดในการแก้ไขปัญหานี้และใช้ได้กับ React ทุกรุ่น

  render() {
    return (
      <div>
        <h1>foo</h1>
        <h2>bar</h2>
      </div>
    );
  }

  หมายเหตุ: ลองดูที่ด้านบนสุดของคำตอบนี้เพื่อดูรายละเอียดเพิ่มเติมและวิธีการที่ transpilesนี้

React 16.0.0เราสามารถคืนองค์ประกอบหลาย ๆ อันจากการเรนเดอร์เป็นอาร์เรย์

return ([
    <Comp1 />,
    <Comp2 />
]);

ทำปฏิกิริยา 16.4.0เราสามารถส่งคืนส่วนประกอบจำนวนมากจากการแสดงผลในแท็ก Fragment ส่วน

return (
<React.Fragment>
    <Comp1 />
    <Comp2 />
</React.Fragment>);

การตอบสนองในอนาคตคุณจะสามารถใช้ไวยากรณ์ชวเลขนี้ได้ (เครื่องมือจำนวนมากยังไม่รองรับดังนั้นคุณอาจต้องการเขียนอย่างชัดเจน<Fragment>จนกว่าเครื่องมือจะจับขึ้นมา)

return (
<>
    <Comp1 />
    <Comp2 />
</>)

หากคุณไม่ได้ห่อองค์ประกอบของคุณแล้วคุณสามารถเขียนได้ตามวิธีการที่ระบุไว้ด้านล่าง

แทน:

return(
  <Comp1 />
  <Comp2 />
     );

คุณสามารถเขียนสิ่งนี้:

return[(
 <Comp1 />
),
(
<Comp2 />
) ];

มันง่ายมากที่เราสามารถใช้ div องค์ประกอบหลักเพื่อห่อองค์ประกอบทั้งหมดหรือเราสามารถใช้แนวคิดองค์ประกอบการสั่งซื้อที่สูงขึ้น (HOC's) เช่นมีประโยชน์มากสำหรับการตอบสนองการใช้งาน js

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

หรืออีกวิธีที่ดีที่สุดคือ HOC มันง่ายมากไม่ซับซ้อนเพียงเพิ่มไฟล์ hoc.js ในโครงการของคุณและเพิ่มรหัสเหล่านี้

const aux = (props) => props.children;
export default aux;

ตอนนี้นำเข้าไฟล์ hoc.js ที่คุณต้องการใช้ตอนนี้แทนที่จะห่อด้วยองค์ประกอบ div เราสามารถห่อด้วย hoc

import React, { Component } from 'react';
import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

มีกฎในการตอบสนองที่นิพจน์ JSX จะต้องมีองค์ประกอบนอกสุดหนึ่งรายการ

ไม่ถูกต้อง

const para = (
    <p></p>
    <p></p>
);

แก้ไข

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

React 16 ได้รับผลตอบแทนของคุณเป็นอาร์เรย์ดังนั้นมันจึงควรห่อหุ้มด้วยองค์ประกอบหนึ่งอย่างเช่น div

วิธีการที่ไม่ถูกต้อง

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

วิธีการที่เหมาะสม (องค์ประกอบทั้งหมดใน div เดียวหรือองค์ประกอบอื่น ๆ ที่คุณใช้)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

ส่วนประกอบที่ทำปฏิกิริยาต้องหุ้มในภาชนะเดียวซึ่งอาจเป็นแท็กใด ๆ เช่น "<div> .. </ div>"

คุณสามารถตรวจสอบวิธีการเรนเดอร์ของ ReactCSSTransitionGroup

Viewมุมมองที่นำเข้าและห่อใน การห่อในdivไม่ได้ผลสำหรับฉัน

import { View } from 'react-native';
...
    render() {
      return (
        <View>
          <h1>foo</h1>
          <h2>bar</h2>
        </View>
      );
    }

ไม่ถูกต้อง: ไม่เพียง แต่องค์ประกอบลูก

render(){
        return(
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        )
    }

ที่ถูกต้อง: องค์ประกอบหลักภายใต้องค์ประกอบย่อย

render(){
        return(
          <div>
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
          </div>
        )
    }

สำหรับนักพัฒนา Rect-Native ฉันพบข้อผิดพลาดนี้ขณะเรนเดอร์ไอเท็มใน FlatList ฉันมีสององค์ประกอบข้อความ ฉันใช้พวกเขาเหมือนด้านล่าง

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>
}

แต่หลังจากที่ฉันใส่ส่วนประกอบต่างๆของ View View เหล่านี้มันก็ใช้ได้กับฉัน

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

คุณอาจกำลังใช้ส่วนประกอบอื่น ๆ แต่การใส่ไว้ในมุมมองอาจใช้งานได้สำหรับคุณ

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

นี่คือตัวอย่างของการแสดงผลองค์ประกอบที่ถูกต้องโดยใช้หลาย divs

return (
  <div>
    <h1>Data Information</H1>
    <div>
      <Button type="primary">Create Data</Button>
    </div>
  </div>
)

ฉันมีปัญหาที่ทำให้เกิดข้อผิดพลาดนี้ซึ่งไม่ชัดเจนทั้งหมด

const App = () => {
  return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
  )
}

และนี่คือการแก้ไข ...

const App = () => {
  return (
      <div className="AppClassName">       <--- note the change
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
  )
}

ไปคิด ข้อมูลถูกแชร์ที่นี่ในกรณีที่คนอื่น ๆ ชนกัน เห็นได้ชัดว่าคุณไม่สามารถมีชื่อคลาสองค์ประกอบเหมือนกับชื่อฟังก์ชันหลักของ React