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

ฉันพยายามใช้เส้นทางที่ตรวจสอบสิทธิ์ แต่พบว่าตอนนี้ React Router 4 ป้องกันไม่ให้สิ่งนี้ทำงาน: <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> ข้อผิดพลาดคือ: คำเตือน: คุณไม่ควรใช้<Route component>และ<Route children>อยู่ในเส้นทางเดียวกัน <Route children>จะถูกละเว้น ในกรณีนี้วิธีที่ถูกต้องในการนำไปใช้คืออะไร? ปรากฏในreact-routerเอกสาร (v4) ซึ่งแนะนำสิ่งต่างๆเช่น <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> …

122 javascript  reactjs  react-router  react-router-v4 

ดูเหมือนว่าฉันจะมีปัญหาในการส่งข้อมูลไปยังอาร์เรย์สถานะ ฉันพยายามบรรลุด้วยวิธีนี้: this.setState({ myArray: this.state.myArray.push('new value') }) แต่ฉันเชื่อว่านี่เป็นวิธีที่ไม่ถูกต้องและทำให้เกิดปัญหาเกี่ยวกับความไม่แน่นอน?

122 javascript  reactjs  immutability 

ฉันกำลังลอง React hooks เป็นครั้งแรกและทุกอย่างดูเหมือนจะดีจนกระทั่งฉันรู้ว่าเมื่อฉันได้รับข้อมูลและอัปเดตตัวแปรสถานะที่แตกต่างกันสองตัว (ข้อมูลและแฟล็กการโหลด) ส่วนประกอบของฉัน (ตารางข้อมูล) จะแสดงผลสองครั้งแม้ว่าทั้งสองสาย ไปยังตัวอัปเดตสถานะกำลังเกิดขึ้นในฟังก์ชันเดียวกัน นี่คือฟังก์ชัน api ของฉันซึ่งส่งคืนตัวแปรทั้งสองไปยังส่วนประกอบของฉัน const getData = url => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const test = await api.get('/people') if(test.ok){ setLoading(false); setData(test.data.results); } }, []); return { data, loading }; }; ในคอมโพเนนต์คลาสปกติคุณจะโทรเพียงครั้งเดียวเพื่ออัปเดตสถานะซึ่งอาจเป็นอ็อบเจ็กต์ที่ซับซ้อน …

122 javascript  reactjs  react-hooks 

นี่อาจเป็นการเหยียบเส้นแบ่งระหว่างคำตอบและความเห็น แต่ฉันจะกลับไปกลับมาถึงวิธีการจัดโครงสร้างส่วนประกอบ ReactJS เมื่อความซับซ้อนเพิ่มขึ้นและสามารถใช้ทิศทางบางอย่างได้ มาจาก AngularJS ฉันต้องการส่งโมเดลของฉันไปยังส่วนประกอบเป็นคุณสมบัติและให้ส่วนประกอบนั้นแก้ไขโมเดลโดยตรง หรือฉันควรจะแยกโมเดลออกเป็นstateคุณสมบัติต่างๆและรวบรวมกลับเข้าด้วยกันเมื่อส่งกลับไปที่ต้นน้ำ? วิธี ReactJS คืออะไร? ใช้ตัวอย่างของโปรแกรมแก้ไขโพสต์บล็อก การพยายามแก้ไขโมเดลโดยตรงจะดูเหมือน: var PostEditor = React.createClass({ updateText: function(e) { var text = e.target.value; this.props.post.text = text; this.forceUpdate(); }, render: function() { return ( <input value={this.props.post.text} onChange={this.updateText}/> <button onClick={this.props.post.save}/>Save</button> ); } }); ซึ่งดูเหมือนผิด. เป็นวิธีการตอบสนองในการสร้างtextคุณสมบัติแบบจำลองของเรามากขึ้นstateหรือไม่และรวบรวมกลับเข้าไปในโมเดลก่อนที่จะบันทึกเช่น: var PostEditor = React.createClass({ getInitialState: function() …

121 reactjs 

ฉันได้รับข้อความนี้เมื่อฉันพยายามเริ่มแอปตอบกลับในตัว โดยปกติรูปแบบประเภทนี้จะใช้งานได้กับการนำทางแบบหลายหน้าจออื่น ๆ แต่ในกรณีนี้ก็ใช้ไม่ได้ นี่คือข้อผิดพลาด: Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html นี่คือรูปแบบแอปของฉัน: import React, {Component} from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createStackNavigator } from 'react-navigation'; import …

121 reactjs  react-native 

ฉันกำลังพยายามส่งคำขอ GET เป็นพารามิเตอร์ที่สอง แต่ไม่ได้ผลในขณะที่ทำเป็น url วิธีนี้ได้ผล $ _GET ['naam'] ส่งกลับการทดสอบ: export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; แต่เมื่อฉันลองสิ่งนี้ไม่มีอะไรเลย$_GET: export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { …

121 reactjs  react-native  redux  axios 

ฉันมีสิ่งต่อไปนี้: ฉันจะกำจัดขีดเส้นใต้สีน้ำเงินได้อย่างไร รหัสอยู่ด้านล่าง: <Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link> ส่วนประกอบ MenuItem มาจากhttp://www.material-ui.com/#/components/menu ข้อมูลเชิงลึกหรือคำแนะนำใด ๆ จะได้รับการชื่นชมอย่างมาก ขอบคุณล่วงหน้า.

121 javascript  reactjs  react-router 

ฉันจะได้รับความสูงขององค์ประกอบหลังจากที่ React แสดงผลองค์ประกอบนั้นได้อย่างไร HTML <div id="container"> <!-- This element's contents will be replaced with your component. --> <p> jnknwqkjnkj<br> jhiwhiw (this is 36px height) </p> </div> ตอบสนอง var DivSize = React.createClass({ render: function() { let elHeight = document.getElementById('container').clientHeight return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>; …

121 javascript  reactjs 

พยายามรับ react-router (v4.0.0) และ react-hot-loader (3.0.0-beta.6) เพื่อให้เล่นได้ดี แต่ได้รับข้อผิดพลาดต่อไปนี้ในคอนโซลเบราว์เซอร์: คำเตือน: React.createElement: type is invalid - คาดว่าจะเป็นสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชัน (สำหรับคอมโพสิตคอมโพสิต) แต่ได้รับ: ไม่ได้กำหนด คุณอาจลืมส่งออกส่วนประกอบของคุณจากไฟล์ที่กำหนดไว้ ดัชนี js: import React from 'react'; import ReactDom from 'react-dom'; import routes from './routes.js'; require('jquery'); import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import './css/main.css'; const renderApp = (appRoutes) => { …

121 reactjs  react-router  react-hot-loader 

ฉันยังใหม่กับการเขียนโปรแกรมซึ่งทำให้ฉันเข้าใจสิ่งต่าง ๆ ได้ยากเล็กน้อยหากฉันอ่านเอกสารอย่างเป็นทางการ ฉันอ่านเกี่ยวกับReact Router 4 จากที่นี่ ในบทความนี้ผู้เขียนกำลังพูดถึง<HashRouter>และ<BrowserRouter> นี่คือสิ่งที่เขากล่าวถึง โดยทั่วไปแล้วHashRouterจะใช้แฮชใน URL เพื่อแสดงผลคอมโพเนนต์ เนื่องจากฉันกำลังสร้างเว็บไซต์หน้าเดียวแบบคงที่ฉันจึงต้องใช้สิ่งนี้ BrowserRouterใช้ HTML5 history API เพื่อแสดงผลคอมโพเนนต์ ประวัติสามารถแก้ไขได้ผ่าน pushState และ replaceState ข้อมูลเพิ่มเติมสามารถดูได้ที่นี่ ตอนนี้ฉันไม่ได้รับความสำคัญและกรณีการใช้งานสำหรับทั้งสองเช่นเขาหมายถึงอะไรเมื่อเขาบอกว่าประวัติสามารถแก้ไขได้ผ่าน pushState และ replaceStateและใช้แฮชใน URL เพื่อแสดงองค์ประกอบ แม้ว่าคำอธิบายแรกของ BrowserRouter จะคลุมเครือสำหรับฉัน แต่คำอธิบายที่สองเกี่ยวกับ HashRouter ก็ไม่สมเหตุสมผลเช่นทำไมบางคนถึงใช้ Hash (#) ใน url เพื่อแสดงผลส่วนประกอบ

121 reactjs 

เริ่มต้นโดยใช้คุณสมบัติการตรวจสอบ propของ ReactJS ซึ่งตามที่เอกสารกล่าวว่าใช้ได้เฉพาะใน 'โหมดการพัฒนา' เพื่อเหตุผลด้านประสิทธิภาพ การตอบสนองดูเหมือนจะตรวจสอบคุณสมบัติของส่วนประกอบบางอย่างที่ฉันใส่คำอธิบายประกอบ แต่ฉันจำไม่ได้ว่าเปิด 'โหมดการพัฒนา' อย่างชัดเจน ฉันพยายามค้นหาวิธีเรียกใช้ / สลับโหมดการพัฒนา แต่ยังไม่มีโชค

120 reactjs 

ฉันเพิ่งเริ่มศึกษา ReactJS และพบว่ามี 2 วิธีในการเรนเดอร์เพจ: ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ แต่ฉันไม่เข้าใจวิธีใช้ร่วมกัน มันเป็น 2 วิธีในการสร้างแอปพลิเคชันแยกกันหรือสามารถใช้ร่วมกันได้หรือไม่? หากเราสามารถใช้ร่วมกันได้จะต้องทำอย่างไร - เราต้องทำซ้ำองค์ประกอบเดียวกันในฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์หรือไม่? หรือเราสามารถสร้างส่วนคงที่ของแอปพลิเคชันของเราบนเซิร์ฟเวอร์และชิ้นส่วนไดนามิกในฝั่งไคลเอ็นต์โดยไม่ต้องเชื่อมต่อกับฝั่งเซิร์ฟเวอร์ที่แสดงผลล่วงหน้าแล้วได้หรือไม่?

120 javascript  node.js  client-server  reactjs 

ฉันมี var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> ); } }); React.renderComponent(<TestApp />, document.body); ฉันต้องการระบายสีพื้นหลังขององค์ประกอบรายการที่คลิก ฉันจะทำสิ่งนี้ใน React ได้อย่างไร? สิ่งที่ต้องการ $('li').on('click', function(){ $(this).css({'background-color': '#ccc'}); });

120 javascript  jquery  reactjs 

ฉันจะฟังเหตุการณ์การเปลี่ยนแปลงสำหรับcontentEditable- ตามการควบคุมได้อย่างไร var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire :( console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/

120 javascript  dom  contenteditable  reactjs 

ฉันต้องการให้แอป ReactJS ของฉันแจ้งเตือนผู้ใช้เมื่อออกจากหน้าใดหน้าหนึ่ง โดยเฉพาะข้อความป๊อปอัปที่เตือนให้เขา / เธอดำเนินการ: "บันทึกการเปลี่ยนแปลงแล้ว แต่ยังไม่เผยแพร่ทำตอนนี้เลยไหม" ฉันควรทริกเกอร์สิ่งนี้ในreact-routerทั่วโลกหรือนี่คือสิ่งที่สามารถทำได้จากภายในหน้าปฏิกิริยา / ส่วนประกอบ? ฉันไม่พบอะไรเลยในตอนหลังและฉันควรหลีกเลี่ยงสิ่งแรก เว้นแต่จะเป็นบรรทัดฐาน แต่นั่นทำให้ฉันสงสัยว่าจะทำสิ่งนั้นได้อย่างไรโดยไม่ต้องเพิ่มโค้ดในทุกหน้าที่เป็นไปได้ที่ผู้ใช้สามารถไปที่ .. ยินดีต้อนรับข้อมูลเชิงลึกใด ๆ ขอบคุณ!

120 reactjs  react-router