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

ฉันมีองค์ประกอบการตอบสนองและในrenderวิธีการของส่วนประกอบฉันมีสิ่งนี้: render() { return ( <div> <div> // removed for brevity </div> { switch(...) {} } <div> // removed for brevity </div> </div> ); } ตอนนี้ประเด็นคือฉันมีสองdivองค์ประกอบหนึ่งที่ด้านบนและอีกหนึ่งที่ด้านล่างซึ่งได้รับการแก้ไขแล้ว ตรงกลางฉันต้องการมีคำสั่งสวิตช์และตามค่าในสถานะของฉันฉันต้องการแสดงองค์ประกอบอื่น โดยพื้นฐานแล้วฉันต้องการให้ทั้งสองdivองค์ประกอบได้รับการแก้ไขเสมอและตรงกลางเพื่อแสดงองค์ประกอบที่แตกต่างกันในแต่ละครั้ง ฉันใช้สิ่งนี้เพื่อใช้ขั้นตอนการชำระเงินหลายขั้นตอน) แม้ว่าตอนนี้รหัสจะใช้งานไม่ได้เนื่องจากมีข้อผิดพลาดแจ้งว่าswitchไม่คาดคิด มีความคิดอย่างไรที่จะบรรลุสิ่งที่ฉันต้องการ?

120 reactjs 

ฉันกำลังทดลองใช้React Hooksใหม่และมีส่วนประกอบนาฬิกาพร้อมตัวนับซึ่งควรจะเพิ่มขึ้นทุกวินาที อย่างไรก็ตามมูลค่าไม่ได้เพิ่มขึ้นเกินหนึ่ง function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> เรียกใช้ข้อมูลโค้ดHide resultsขยายข้อมูลโค้ด

120 javascript  reactjs  react-hooks 

ฉันกำลังสร้างแอปที่จะต้องพร้อมใช้งานในหลายภาษาและสถานที่ คำถามของฉันไม่ใช่เรื่องทางเทคนิค แต่เป็นเรื่องของสถาปัตยกรรมและรูปแบบที่ผู้คนใช้ในการผลิตเพื่อแก้ปัญหานี้ ฉันไม่พบ "ตำราอาหาร" ที่ไหนเลยฉันจึงหันไปหาเว็บไซต์ถาม / ตอบที่ฉันชอบ :) นี่คือข้อกำหนดของฉัน (เป็น "มาตรฐาน" จริงๆ): ผู้ใช้สามารถเลือกภาษา (เล็กน้อย) เมื่อเปลี่ยนภาษาอินเทอร์เฟซควรแปลโดยอัตโนมัติเป็นภาษาที่เลือกใหม่ ฉันไม่กังวลเกี่ยวกับการจัดรูปแบบตัวเลขวันที่และอื่น ๆ มากเกินไปในขณะนี้ฉันต้องการวิธีง่ายๆในการแปลสตริง นี่คือวิธีแก้ปัญหาที่เป็นไปได้ที่ฉันคิดออก: แต่ละองค์ประกอบจัดการกับการแปลแยกกัน ซึ่งหมายความว่าแต่ละองค์ประกอบมีตัวอย่างเช่นชุดของไฟล์ en.json, fr.json เป็นต้นควบคู่ไปกับสตริงที่แปลแล้ว และฟังก์ชันตัวช่วยเพื่อช่วยในการอ่านค่าจากค่าที่ขึ้นอยู่กับภาษาที่เลือก Pro: เคารพในปรัชญาการตอบสนองมากขึ้นแต่ละองค์ประกอบเป็นแบบ "สแตนด์อโลน" จุดด้อย: คุณไม่สามารถรวมการแปลทั้งหมดไว้ในไฟล์ได้ (เช่นให้คนอื่นเพิ่มภาษาใหม่) จุดด้อย: คุณยังคงต้องส่งภาษาปัจจุบันเป็นเสาหลักในทุกองค์ประกอบที่เปื้อนเลือดและลูก ๆ ของพวกเขา แต่ละองค์ประกอบจะรับการแปลผ่านอุปกรณ์ประกอบฉาก ดังนั้นพวกเขาจึงไม่ทราบภาษาปัจจุบันพวกเขาเพียงแค่ใช้รายการสตริงเป็นอุปกรณ์ประกอบฉากที่ตรงกับภาษาปัจจุบัน Pro: เนื่องจากสตริงเหล่านั้นมาจาก "ด้านบน" จึงสามารถรวมศูนย์ไว้ที่ใดที่หนึ่งได้ จุดด้อย: ตอนนี้แต่ละองค์ประกอบเชื่อมโยงเข้ากับระบบการแปลคุณไม่สามารถใช้ซ้ำได้คุณต้องระบุสตริงที่ถูกต้องทุกครั้ง คุณหลีกเลี่ยงอุปกรณ์ประกอบฉากเล็กน้อยและอาจใช้บริบทเพื่อส่งผ่านภาษาปัจจุบัน Pro: ส่วนใหญ่โปร่งใสไม่ต้องส่งภาษาปัจจุบันและ / หรือคำแปลผ่านอุปกรณ์ประกอบฉากตลอดเวลา จุดด้อย: …

119 architecture  internationalization  reactjs  translation  redux 

สมมติว่าฉันมีส่วนประกอบที่มีการเรนเดอร์ดังนี้: <View style={jewelStyle}></View> โดยที่ jewelStyle = { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, ฉันจะสร้างสีพื้นหลังแบบไดนามิกและกำหนดแบบสุ่มได้อย่างไร ฉันพยายามแล้ว { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, แต่สิ่งนี้ทำให้อินสแตนซ์ทั้งหมดของ View มีสีเดียวกันฉันต้องการให้แต่ละอันไม่ซ้ำกัน เคล็ดลับใด ๆ

119 css  reactjs  react-native 

ความหมายของ {...this.props} ฉันพยายามจะใช้มันแบบนั้น <div {...this.props}> Content Here </div>

119 reactjs 

ฉันไม่สามารถดูเหมือนจะหาวิธีการปรับปรุง params <Link/>แบบสอบถามที่มีการตอบสนองเราเตอร์โดยไม่ต้องใช้ hashHistory.push(url)ดูเหมือนจะไม่ลงทะเบียนพารามิเตอร์การสืบค้นและดูเหมือนว่าคุณไม่สามารถส่งผ่านวัตถุแบบสอบถามหรืออะไรก็ได้เป็นอาร์กิวเมนต์ที่สอง คุณจะเปลี่ยน url จาก/shop/Clothes/dressesเป็น/shop/Clothes/dresses?color=blueใน react-router โดย<Link>ไม่ใช้ได้อย่างไร? และonChangeฟังก์ชั่นเป็นวิธีเดียวที่จะรับฟังการเปลี่ยนแปลงคำค้นหาหรือไม่ เหตุใดจึงไม่ตรวจพบการเปลี่ยนแปลงการค้นหาโดยอัตโนมัติและตอบสนองต่อวิธีการเปลี่ยนแปลงพารามิเตอร์

119 reactjs  react-router 

ฉันเพิ่งเริ่มทำงานกับโครงการ React ด้วย TypeScript และถามตัวเองว่าฉันควรทำอย่างไรกับไฟล์คลาสปกติ ฉันควรใช้.tsหรือ.tsxไฟล์แล้วฉันไม่พบเหตุผลที่จะไม่ใช้.tsxไฟล์ตลอดเวลาแม้ว่าจะไม่ใช่โครงการ React ก็ตาม! มีเหตุผลหรือสถานการณ์เฉพาะที่เราไม่ควรใช้.tsxไฟล์หรือไม่? ถ้าไม่ทำไมทีม TypeScript จึงเพิ่มส่วนขยายใหม่ทั้งหมด

119 javascript  reactjs  typescript 

ฉันรู้ว่าใน vanilla js เราทำได้ onclick="f1();f2()" อะไรจะเทียบเท่ากับการเรียกใช้ฟังก์ชันสองฟังก์ชัน onClick ใน ReactJS ฉันรู้ว่าการเรียกฟังก์ชันหนึ่งเป็นแบบนี้: onClick={f1}

119 javascript  reactjs 

ในแอปตอบกลับของฉันฉันใช้axiosเพื่อดำเนินการร้องขอ REST api แต่ไม่สามารถส่งส่วนหัวการให้สิทธิ์พร้อมคำขอได้ นี่คือรหัสของฉัน: tokenPayload() { let config = { headers: { 'Authorization': 'Bearer ' + validToken() } } Axios.post( 'http://localhost:8000/api/v1/get_token_payloads', config ) .then( ( response ) => { console.log( response ) } ) .catch() } นี่คือvalidToken()วิธีการก็จะกลับมาจากการจัดเก็บโทเค็นเบราว์เซอร์ คำขอทั้งหมดมีการตอบสนองข้อผิดพลาด 500 รายการโดยแจ้งว่า ไม่สามารถแยกวิเคราะห์โทเค็นจากคำขอได้ จากด้านหลัง จะส่งส่วนหัวการให้สิทธิ์กับแต่ละคำขอได้อย่างไร คุณจะแนะนำโมดูลอื่น ๆ ที่มีปฏิกิริยาหรือไม่?

119 reactjs  rest  token  axios  access-token 

ฉันอ่านสิ่งนี้ในบทช่วยสอนการตอบสนอง สิ่งนี้หมายความว่า? React มีความปลอดภัย เราไม่ได้สร้างสตริง HTML ดังนั้นการป้องกัน XSS จึงเป็นค่าเริ่มต้น การโจมตี XSS ทำงานอย่างไรหาก React ปลอดภัย ความปลอดภัยนี้บรรลุได้อย่างไร?

119 reactjs  security  xss 

ฉันใช้ Axios ขณะเขียนโปรแกรมใน ReactJS และฉันแสร้งทำเป็นส่งคำขอ DELETE ไปยังเซิร์ฟเวอร์ของฉัน ในการทำเช่นนั้นฉันต้องการส่วนหัว: headers: { 'Authorization': ... } และร่างกายประกอบด้วย var payload = { "username": .. } ฉันค้นหาในเว็บระหว่างกันและพบเพียงว่าเมธอด DELETE ต้องการ "พารามิเตอร์" และไม่ยอมรับ "ข้อมูล" ฉันพยายามส่งแบบนี้: axios.delete(URL, payload, header); หรือแม้กระทั่ง axios.delete(URL, {params: payload}, header); แต่ดูเหมือนจะไม่ได้ผล ... ใครช่วยบอกหน่อยได้ไหมว่าเป็นไปได้ (ฉันคิดว่าเป็น) เพื่อส่งคำขอ DELETE พร้อมทั้งส่วนหัวและเนื้อหาและต้องทำอย่างไร ขอบคุณล่วงหน้า!

119 javascript  reactjs  http  axios  http-delete 

ฉันกำลังเล่นกับMaterial-UIอยู่นิดหน่อย มีตัวเลือกใดบ้างสำหรับการสร้างเค้าโครงกริด (เช่นในBootstrap ) หรือไม่? ถ้าไม่วิธีเพิ่มฟังก์ชันนี้คืออะไร? มีส่วนประกอบ GridListแต่ฉันเดาว่ามันมีจุดประสงค์ที่แตกต่างกัน

118 reactjs  material-design  material-ui  grid-system 

ฉันต้องการส่งข้อความด้วยแท็ก HTML ดังนี้: <MyComponent text="This is <strong>not</strong> working." /> แต่ภายในMyComponentวิธีการเรนเดอร์ของเมื่อฉันพิมพ์ออกมาthis.props.textมันจะพิมพ์ทุกอย่างออกมาอย่างแท้จริง: This is <strong>not</strong> working. มีวิธีใดบ้างที่จะทำให้ React แยกวิเคราะห์ HTML และถ่ายโอนข้อมูลออกอย่างถูกต้อง

118 reactjs 

ฉันยังคงเป็น noob ที่ React และในหลาย ๆ ตัวอย่างบนอินเทอร์เน็ตฉันเห็นรูปแบบนี้ในการแสดงองค์ประกอบย่อยซึ่งฉันรู้สึกสับสน ปกติฉันจะเห็นสิ่งนี้: class Users extends React.Component { render() { return ( <div> <h2>Users</h2> {this.props.children} </div> ) } } แต่แล้วฉันก็เห็นตัวอย่างเช่นนี้: <ReactCSSTransitionGroup component="div" transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500} > {React.cloneElement(this.props.children, { key: this.props.location.pathname })} </ReactCSSTransitionGroup> ตอนนี้ฉันเข้าใจ api แล้ว แต่เอกสารไม่ชัดเจนว่าฉันควรจะใช้มันเมื่อไหร่ แล้วสิ่งหนึ่งที่ทำไม่ได้คืออะไร? ใครช่วยอธิบายเรื่องนี้ให้ฉันฟังด้วยตัวอย่างที่ดีกว่านี้ได้ไหม

118 reactjs 

ฉันรู้ว่าฉันไม่ควรกลายพันธุ์อินพุตและควรโคลนวัตถุเพื่อกลายพันธุ์ ฉันปฏิบัติตามแบบแผนที่ใช้กับโครงการเริ่มต้น redux ซึ่งใช้: ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) สำหรับการเพิ่มรายการ - ฉันได้รับการใช้การแพร่กระจายเพื่อต่อท้ายรายการในอาร์เรย์ สำหรับการลบฉันใช้: DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) แต่นี่เป็นการกลายพันธุ์วัตถุสถานะอินพุต - สิ่งนี้ต้องห้ามแม้ว่าฉันจะส่งคืนวัตถุใหม่หรือไม่

118 javascript  reactjs  redux