คำถามติดแท็ก reactjs

จากบทช่วยสอน react.jsเราจะเห็นการใช้วงเล็บปีกกาคู่นี้: <span dangerouslySetInnerHTML={{ __html: rawMarkup }} /> จากนั้นในบทแนะนำที่สอง "กำลังคิดในการตอบสนอง" : <span style={{ color: 'red' }}> {this.props.product.name} </span>; อย่างไรก็ตามเอกสาร React JSXไม่ได้อธิบายหรือกล่าวถึงวงเล็บปีกกาสองชั้น ไวยากรณ์นี้ (double curlies) มีไว้เพื่ออะไร? และมีวิธีอื่นในการแสดงสิ่งเดียวกันใน jsx หรือนี่เป็นเพียงการละเว้นจากเอกสาร?

114 javascript  reactjs 

ฉันมีวัตถุที่ต้องการส่งออกทาง REACT question = { text: "Is this a good question?", answers: [ "Yes", "No", "I don't know" ] } และส่วนประกอบปฏิกิริยาของฉัน (ตัดลง) เป็นอีกองค์ประกอบหนึ่ง class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.forEach(answer => { console.log("Entered"); //This does ifre <Answer answer={answer} /> //THIS DOES NOT WORK })} } export default …

114 reactjs  react-props 

ฉันเป็นคนใหม่ใน react.js ฉันได้ใช้ส่วนประกอบหนึ่งที่ฉันกำลังดึงข้อมูลจากเซิร์ฟเวอร์และใช้มันเช่น CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, ฉันต้องการจัดเก็บ Url ในไฟล์คอนฟิกูเรชันดังนั้นเมื่อฉันปรับใช้สิ่งนี้บนเซิร์ฟเวอร์การทดสอบหรือในการผลิตฉันต้องเปลี่ยน url บนไฟล์ config ที่ไม่ใช่ในไฟล์ js แต่ฉันไม่รู้วิธีใช้ไฟล์คอนฟิกูเรชันใน react.js ใครช่วยแนะนำฉันหน่อยได้ไหมว่าฉันจะบรรลุเป้าหมายนี้ได้อย่างไร

113 javascript  reactjs  configuration  webpack  flux 

ฉันอยากจะถามว่าทำไมสถานะของฉันถึงไม่เปลี่ยนไปเมื่อฉันทำกิจกรรม onclick ฉันค้นหามานานแล้วว่าฉันต้องการผูกฟังก์ชัน onclick ในตัวสร้าง แต่สถานะยังไม่อัปเดต นี่คือรหัสของฉัน: import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import BoardAddModal from 'components/board/BoardAddModal.jsx'; import style from 'styles/boarditem.css'; class BoardAdd extends React.Component { constructor(props){ super(props); this.state = { boardAddModalShow: false } this.openAddBoardModal = this.openAddBoardModal.bind(this); } openAddBoardModal(){ this.setState({ …

113 javascript  reactjs  ecmascript-6 

ฉันใช้ react และ react-router สำหรับแอปพลิเคชันของฉันทางฝั่งไคลเอ็นต์ ฉันไม่สามารถหาวิธีรับพารามิเตอร์การค้นหาต่อไปนี้จาก url เช่น: http://xmen.database/search#/?status=APPROVED&page=1&limit=20 เส้นทางของฉันมีลักษณะเช่นนี้ (ฉันรู้เส้นทางผิดโดยสิ้นเชิง): var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); เส้นทางของฉันใช้งานได้ดี แต่ฉันไม่แน่ใจว่าจะจัดรูปแบบเส้นทางเพื่อให้ได้พารามิเตอร์ที่ฉันต้องการอย่างไร ขอบคุณความช่วยเหลือใด ๆ เกี่ยวกับเรื่องนี้!

112 javascript  reactjs  client-side  react-router  client-side-scripting 

เราใช้ Backbone + ReactJS บันเดิลเพื่อสร้างแอปฝั่งไคลเอ็นต์ การใช้ความฉาวโฉ่อย่างมากทำให้valueLinkเราเผยแพร่ค่าไปยังโมเดลโดยตรงผ่านทาง wrapper ของตัวเองที่รองรับอินเทอร์เฟซ ReactJS สำหรับการผูกสองทาง ตอนนี้เราประสบปัญหา: เรามีjquery.mask.jsปลั๊กอินที่จัดรูปแบบค่าอินพุตโดยทางโปรแกรมดังนั้นจึงไม่เริ่มเหตุการณ์ React ทั้งหมดนี้นำไปสู่สถานการณ์เมื่อโมเดลได้รับค่าที่ไม่ได้จัดรูปแบบจากอินพุตของผู้ใช้และพลาดค่าที่จัดรูปแบบจากปลั๊กอิน ดูเหมือนว่า React มีกลยุทธ์การจัดการเหตุการณ์มากมายขึ้นอยู่กับเบราว์เซอร์ มีวิธีทั่วไปในการทริกเกอร์เหตุการณ์การเปลี่ยนแปลงสำหรับองค์ประกอบ DOM เฉพาะเพื่อให้ React ได้ยินหรือไม่

112 reactjs 

เมื่อติดตั้ง'react-native init AwesomeProject'ฉันได้รับข้อผิดพลาดนี้เมื่อเรียกใช้react-native run-android: Could not determine java version from '11.0.1'. Google ด่วนแนะนำว่าฉันต้องอัปเดตdistributionUrlใน Gradle-wrapper หลังจากทำสิ่งนี้แล้วฉันพบกับข้อผิดพลาดใหม่: Cannot add task 'wrapper' as a task with that name already exists. แนะนำว่าปัญหาอยู่ในไฟล์: /AwesomeProject/android/build.gradle' line: 36 ซึ่งมีลักษณะเช่นนี้ task wrapper(type: Wrapper) { gradleVersion = '4.4' distributionUrl = distributionUrl.replace("bin", "all") } ฉันกลับไปกลับมาพยายามคิดว่าสิ่งนี้ทำอย่างไร ดูเหมือนจะแปลกที่มีบางอย่างไม่สามารถใช้งานได้ทันที มีใครประสบปัญหาคล้าย ๆ กันไหม

112 android  reactjs  react-native  wrapper  expo 

ฉันกำลังทำงานกับ reactjs และดูเหมือนจะไม่สามารถป้องกันข้อผิดพลาดนี้ได้เมื่อพยายามแสดงข้อมูล JSON (จากไฟล์หรือเซิร์ฟเวอร์): Uncaught TypeError: this.props.data.map is not a function ฉันได้ดู: รหัสตอบสนองที่ขว้าง“ TypeError: this.props.data.map ไม่ใช่ฟังก์ชัน” React.js this.props.data.map () ไม่ใช่ฟังก์ชัน สิ่งเหล่านี้ไม่ได้ช่วยฉันแก้ไขปัญหา หลังจากโหลดหน้าของฉันฉันสามารถตรวจสอบได้ว่า this.data.props ไม่ได้กำหนด (และมีค่าเทียบเท่ากับออบเจ็กต์ JSON - สามารถโทรติดต่อได้window.foo) ดังนั้นดูเหมือนว่าจะไม่โหลดในเวลาที่เรียกโดย ConversationList ฉันจะแน่ใจได้อย่างไรว่าmapเมธอดกำลังทำงานกับข้อมูล JSON ไม่ใช่undefinedตัวแปร var converter = new Showdown.converter(); var Conversation = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); …

112 javascript  ajax  json  reactjs 

ฉันพยายามที่บิตแรกของ React.js และกำลังนิ่งงันในช่วงต้น ... <div id="search"></div>ฉันมีโค้ดด้านล่างซึ่งทำให้ฟอร์มการค้นหาลงใน แต่การพิมพ์ในช่องค้นหาไม่ทำอะไรเลย มีบางอย่างที่อาจขาดหายไปโดยผ่านอุปกรณ์ประกอบฉากและขึ้นลงและดูเหมือนว่าจะเป็นปัญหาทั่วไป แต่ฉันนิ่งงัน - ไม่เห็นว่ามีอะไรหายไป var SearchFacet = React.createClass({ handleChange: function() { this.props.onUserInput( this.refs.searchStringInput.value ) }, render: function() { return ( <div> Search for: <input type="text" value={this.props.searchString} ref="searchStringInput" onchange={this.handleChange} /> </div> ); } }); var SearchTool = React.createClass({ render: function() { return ( <form> …

111 javascript  reactjs 

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

111 javascript  html  reactjs  react-jsx 

คุณควรใช้this.setState()เมื่อใช้ redux หรือไม่? หรือคุณควรจะส่งการกระทำและอาศัยอุปกรณ์ประกอบฉากอยู่เสมอ?

111 reactjs  flux  redux 

ฉันกำลังพยายามสร้างส่วนประกอบ ApiWrapper ที่ดีเพื่อเติมข้อมูลในส่วนประกอบย่อยต่างๆ จากทุกสิ่งที่ฉันอ่านสิ่งนี้ควรใช้งานได้: https://jsfiddle.net/vinniejames/m1mesp6z/1/ class ApiWrapper extends React.Component { constructor(props) { super(props); this.state = { response: { "title": 'nothing fetched yet' } }; } componentDidMount() { this._makeApiCall(this.props.endpoint); } _makeApiCall(endpoint) { fetch(endpoint).then(function(response) { this.setState({ response: response }); }.bind(this)) } render() { return <Child data = { this.state.response } />; } …

111 reactjs 

นี่คือแบบฟอร์มของฉันและวิธีการ onClick ฉันต้องการใช้วิธีนี้เมื่อกดปุ่ม Enter ของแป้นพิมพ์ อย่างไร? หมายเหตุ: ไม่มีการชื่นชม jquery comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" ref="userPostId" /> <br /> <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button> </form>

111 reactjs  reactjs-flux 

ฉันมีส่วนประกอบที่ฉันสร้างขึ้น: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: state.playlists } } export …

111 javascript  reactjs  redux 

นี่คือเวิร์กโฟลว์ปัจจุบันของฉันสำหรับการนำเข้ารูปภาพและไอคอนใน webpack ผ่าน ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> สิ่งนี้จะยุ่งอย่างรวดเร็ว นี่คือสิ่งที่ฉันต้องการ: import * from './images' <img src={doggy} /> <img src={turtle} /> ฉันรู้สึกว่าต้องมีวิธีการนำเข้าไฟล์ทั้งหมดแบบไดนามิกจากไดเร็กทอรีเฉพาะเป็นนามสกุลของชื่อแล้วใช้ไฟล์เหล่านั้นตามต้องการ ใครเคยเห็นสิ่งนี้หรือมีความคิดใด ๆ เกี่ยวกับวิธีที่ดีที่สุดที่จะไปเกี่ยวกับมัน? อัพเดท: เมื่อใช้คำตอบที่เลือกฉันสามารถทำได้: function importAll(r) { let images = {}; r.keys().map((item, index) …

111 reactjs  webpack  ecmascript-6