คำถามติดแท็ก react-jsx

React เป็นไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้ ใช้กระบวนทัศน์ที่เปิดเผยตามองค์ประกอบและมีเป้าหมายที่จะมีทั้งประสิทธิภาพและความยืดหยุ่น

24
วิธีส่งอุปกรณ์ประกอบฉากไปยัง {this.props.children}
ฉันพยายามหาวิธีที่เหมาะสมในการกำหนดองค์ประกอบบางอย่างซึ่งสามารถใช้ในวิธีทั่วไป: <Parent> <Child value="1"> <Child value="2"> </Parent> มีตรรกะที่เกิดขึ้นสำหรับการแสดงผลระหว่างผู้ปกครองและองค์ประกอบของเด็กแน่นอนคุณสามารถจินตนาการ<select>และ<option>เป็นตัวอย่างของตรรกะนี้ นี่คือการดำเนินการจำลองเพื่อวัตถุประสงค์ของคำถาม: var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); คำถามคือเมื่อใดก็ตามที่คุณใช้{this.props.children}ในการกำหนดองค์ประกอบ wrapper คุณจะส่งผ่านคุณสมบัติบางอย่างให้กับลูก ๆ ของมันได้อย่างไร

19
คุณสามารถบังคับให้ส่วนประกอบ React ทำการแสดงซ้ำโดยไม่เรียก setState ได้หรือไม่?
ฉันมีวัตถุภายนอก (ไปยังส่วนประกอบ) ซึ่งสามารถสังเกตได้ที่ฉันต้องการฟังเพื่อการเปลี่ยนแปลง เมื่อวัตถุได้รับการปรับปรุงมันจะปล่อยกิจกรรมการเปลี่ยนแปลงและจากนั้นฉันต้องการที่จะแสดงส่วนประกอบอีกครั้งเมื่อตรวจพบการเปลี่ยนแปลงใด ๆ ด้วยระดับบนสุดReact.renderสิ่งนี้เป็นไปได้ แต่ภายในองค์ประกอบมันใช้งานไม่ได้ (ซึ่งทำให้เข้าใจได้ตั้งแต่renderวิธีการส่งคืนวัตถุ) นี่คือตัวอย่างรหัส: export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } การคลิกปุ่มโทรภายในthis.render()แต่นั่นไม่ใช่สิ่งที่ทำให้เกิดการแสดงผลจริง (คุณสามารถเห็นสิ่งนี้ได้ในทางปฏิบัติเพราะข้อความที่สร้างขึ้นโดย{Math.random()}ไม่เปลี่ยนแปลง) อย่างไรก็ตามถ้าฉันเพียงแค่โทรthis.setState()แทนthis.render()มันก็ใช้ได้ดี ดังนั้นฉันเดาว่าคำถามของฉันคือองค์ประกอบการตอบสนองต้องมีสถานะเพื่อแสดงซ้ำหรือไม่ มีวิธีบังคับให้ส่วนประกอบอัปเดตตามคำขอโดยไม่เปลี่ยนสถานะหรือไม่
690 reactjs  react-jsx 

19
React.js แนวทางปฏิบัติที่ดีที่สุดของสไตล์อินไลน์
ฉันทราบว่าคุณสามารถระบุสไตล์ภายในคลาส React เช่นนี้: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); ฉันควรตั้งเป้าหมายที่จะจัดแต่งทรงผมด้วยวิธีนี้และไม่มีสไตล์ตามที่ระบุไว้ในไฟล์ CSS ของฉันหรือไม่? หรือฉันควรหลีกเลี่ยงรูปแบบอินไลน์อย่างสมบูรณ์? ดูเหมือนแปลกและยุ่งเหยิงที่จะทำทั้งสองอย่างเล็กน้อย - สถานที่สองแห่งจะต้องได้รับการตรวจสอบเมื่อปรับแต่งสไตล์

6
ทำไมการเรียกใช้เมธอดปฏิกิริยา setState จึงไม่ทำให้เกิดการเปลี่ยนแปลงสถานะทันที
ฉันกำลังอ่านส่วนของฟอร์มreactjsเอกสารและลองใช้รหัสนี้เพื่อสาธิตonChangeการใช้งาน ( JSBIN ) var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); เมื่อฉันอัปเดต<input/>ค่าในเบราว์เซอร์ที่สองconsole.logภายในการhandleChangeโทรกลับพิมพ์เหมือนvalueครั้งแรกconsole.logทำไมฉันไม่เห็นผลลัพธ์this.setState({value: event.target.value})ในขอบเขตของการhandleChangeโทรกลับ

16
การเพิ่มแท็กสคริปต์ใน React / JSX
ฉันมีปัญหาที่ค่อนข้างตรงไปตรงมาในการพยายามเพิ่มสคริปต์แบบอินไลน์ให้กับองค์ประกอบ React สิ่งที่ฉันมี: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true …

27
จะมีองค์ประกอบตามเงื่อนไขและใช้ DRY กับ JSX ของ Facebook React ได้อย่างไร
ฉันจะรวมองค์ประกอบไว้ใน 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> ); }

8
แทรก HTML ด้วยข้อความตอบกลับตัวแปร (JSX)
ฉันกำลังสร้างบางสิ่งด้วย React ที่ฉันต้องการแทรก HTML ด้วยตัวแปร React ใน JSX มีวิธีที่จะมีตัวแปรดังนี้: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; และใส่เข้าไปในปฏิกิริยาเช่นนั้นและทำงานได้หรือไม่ render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } และมันแทรก HTML ตามที่คาดไว้หรือไม่ ฉันไม่ได้เห็นหรือได้ยินอะไรเกี่ยวกับฟังก์ชั่นตอบสนองที่สามารถทำแบบอินไลน์นี้หรือวิธีการแยกวิเคราะห์สิ่งที่จะช่วยให้การทำงาน

12
React / JSX Dynamic Component Name
ฉันกำลังพยายามแสดงองค์ประกอบแบบไดนามิกตามประเภทของพวกเขา ตัวอย่างเช่น: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> ฉันลองวิธีแก้ปัญหาที่เสนอที่นี่ชื่อส่วนประกอบแบบไดนามิก React / JSX นั่นทำให้ฉันมีข้อผิดพลาดเมื่อรวบรวม (ใช้ browserify สำหรับอึก) มันคาดว่า XML ที่ฉันใช้ไวยากรณ์อาร์เรย์ ฉันสามารถแก้ปัญหานี้โดยการสร้างวิธีการสำหรับทุกองค์ประกอบ: newExampleComponent() { return <ExampleComponent />; } newComponent(type) { return this["new" + type + "Component"](); } …

5
วิธีการวนซ้ำและแสดงองค์ประกอบใน React.js โดยไม่ต้องอาร์เรย์ของวัตถุที่จะทำแผนที่?
ฉันพยายามแปลงองค์ประกอบ jQuery เป็น React.js และสิ่งหนึ่งที่ฉันมีปัญหาคือการแสดงองค์ประกอบจำนวน n ตามการวนรอบ mapผมเข้าใจในเรื่องนี้เป็นไปไม่ได้หรือแนะนำและว่าที่อาร์เรย์ที่มีอยู่ในรูปแบบมันทำให้รู้สึกที่สมบูรณ์ในการใช้งาน ไม่เป็นไร แต่ถ้าคุณไม่มีอาเรย์ล่ะ? แต่คุณมีค่าตัวเลขซึ่งเท่ากับจำนวนองค์ประกอบที่กำหนดที่จะแสดงดังนั้นคุณควรทำอย่างไร นี่คือตัวอย่างของฉันฉันต้องการนำหน้าองค์ประกอบที่มีแท็ก span จำนวนเท่าใดก็ได้ตามระดับของลำดับชั้น ดังนั้นที่ระดับ 3 ฉันต้องการแท็ก 3 ส่วนต่อหน้าองค์ประกอบข้อความ ในจาวาสคริปต์: for (var i = 0; i < level; i++) { $el.append('<span class="indent"></span>'); } $el.append('Some text value'); ฉันไม่สามารถรับสิ่งนี้ได้หรือสิ่งใดที่คล้ายคลึงกับการทำงานในองค์ประกอบ JSX React.js แต่ฉันต้องทำสิ่งต่อไปนี้ก่อนอื่นให้สร้างอาร์เรย์ชั่วคราวตามความยาวที่ถูกต้องแล้ววนลูปอาร์เรย์ React.js render: function() { var tmp = []; for (var …

6
คำเตือน: คลาสคุณสมบัติ DOM ที่ไม่รู้จัก คุณหมายถึง className หรือเปล่า
ฉันเพิ่งเริ่มสำรวจ React โดยการเพิ่มส่วนประกอบที่มีฟังก์ชันการแสดงผลอย่างง่าย: render() { return <div class="myApp"></div> } เมื่อฉันเรียกใช้แอพฉันได้รับข้อผิดพลาดต่อไปนี้: Warning: Unknown DOM property class. Did you mean className? ฉันสามารถแก้ปัญหานี้โดยการเปลี่ยนไปclassclassName คำถามคือ; React บังคับใช้อนุสัญญานี้หรือไม่ นอกจากนี้ทำไมฉันต้องใช้classNameแทนของเดิมclass? หากนี่เป็นข้อ จำกัด นั่นเป็นเพราะไวยากรณ์ JSX หรือที่อื่น?

9
ReactJS:“ Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด <”
ฉันกำลังพยายามเริ่มสร้างไซต์ใน ReactJS อย่างไรก็ตามเมื่อฉันพยายามใส่ JS ของฉันในไฟล์แยกต่างหากฉันเริ่มได้รับข้อผิดพลาดนี้: "Uncaught SyntaxError: Uncaught SyntaxError: Uncaught token &lt;" ฉันพยายามเพิ่ม/** @jsx React.DOM */ที่ด้านบนของไฟล์ JS แต่ก็ไม่ได้แก้ไขอะไร ด้านล่างนี้คือไฟล์ HTML และ JS มีความคิดว่าเกิดอะไรขึ้น? HTML &lt;html&gt; &lt;head&gt; &lt;title&gt;Page&lt;/title&gt; &lt;script src="http://fb.me/react-0.12.2.js"&gt;&lt;/script&gt; &lt;script src="http://fb.me/JSXTransformer-0.12.2.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-1.10.0.min.js"&gt; &lt;/script&gt; &lt;script src="./lander.js"&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt;&lt;/div&gt; &lt;script type="text/jsx"&gt; React.render( &lt;Lander /&gt;, document.getElementById('content') ); &lt;/script&gt; &lt;/body&gt; …

7
ตอบสนองไฟล์ JSX ที่ให้ข้อผิดพลาด "ไม่สามารถอ่านคุณสมบัติ 'createElement' ของไม่ได้กำหนด"
ฉันมีไฟล์ test_stuff.js ที่ใช้งานอยู่ npm test ดูเหมือนว่า: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( &lt;MyProvider&gt; &lt;/MyProvider&gt; ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal(-1, [1,2,3].indexOf(4)); …

9
แนวทางปฏิบัติที่ดีที่สุดเมื่อเพิ่มช่องว่างใน JSX
ฉันเข้าใจวิธี (และทำไม ) ในการเพิ่มช่องว่างใน JSX แต่ฉันสงสัยว่าแนวทางปฏิบัติที่ดีที่สุดคืออะไรหรือมีข้อแตกต่างที่แท้จริงอย่างไร รวมทั้งสององค์ประกอบในช่วง &lt;div className="top-element-formatting"&gt; &lt;span&gt;Hello &lt;/span&gt; &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt; &lt;/div&gt; เพิ่มในบรรทัดเดียว &lt;div className="top-element-formatting"&gt; Hello &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt; &lt;/div&gt; Add space with JS &lt;div className="top-element-formatting"&gt; Hello {" "} &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt; &lt;/div&gt;

7
มีรูปแบบ JSX สำหรับข้อความประเสริฐหรือไม่?
ฉันใช้ Sublime Text เป็นโปรแกรมแก้ไขข้อความ มี jsFormat สำหรับจัดรูปแบบไฟล์ javascript แต่ฉันไม่พบไฟล์สำหรับ JSX พวกคุณจัดการกับการฟอร์แมต JSX อย่างไร?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.