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

ฉันกำลังย้ายแอปพลิเคชัน React ไปยัง TypeScript จนถึงตอนนี้มันใช้งานได้ดี แต่ฉันมีปัญหากับประเภทการส่งคืนของrenderฟังก์ชันตามลำดับส่วนประกอบฟังก์ชันของฉัน จนถึงตอนนี้ผมได้ใช้เสมอJSX.Elementเป็นชนิดกลับตอนนี้ไม่ได้ทำงานใด ๆ มากขึ้นถ้าเป็นส่วนประกอบตัดสินใจที่จะไม่ทำให้อะไรคือผลตอบแทนnullตั้งแต่ไม่มีค่าที่ถูกต้องสำหรับnull JSX.Elementนี่เป็นจุดเริ่มต้นของการเดินทางของฉันเพราะตอนนี้ฉันค้นหาเว็บและพบว่าคุณควรใช้ReactNodeแทนซึ่งรวมถึงnullสิ่งอื่น ๆ ที่อาจเกิดขึ้นได้ด้วย นี่ดูเหมือนจะเป็นการเดิมพันที่ดีกว่า อย่างไรก็ตามตอนนี้เมื่อสร้างส่วนประกอบของฟังก์ชัน TypeScript จะบ่นเกี่ยวกับReactNodeประเภท อีกครั้งหลังจากการค้นหาบางอย่างฉันพบว่าสำหรับส่วนประกอบของฟังก์ชันคุณควรใช้ReactElementแทน อย่างไรก็ตามหากฉันทำเช่นนั้นปัญหาความเข้ากันได้จะหายไป แต่ตอนนี้ TypeScript บ่นอีกครั้งว่าnullไม่ใช่ค่าที่ถูกต้อง ดังนั้นเพื่อตัดเรื่องสั้นให้สั้นฉันมีคำถามสามข้อ: คือความแตกต่างระหว่างสิ่งที่JSX.Element, ReactNodeและReactElement? ทำไมrenderวิธีการของส่วนประกอบชั้นกลับReactNodeแต่ชิ้นส่วนฟังก์ชั่นกลับมาReactElement? ฉันจะแก้ปัญหานี้ได้nullอย่างไร?

168 javascript  reactjs  typescript 

ฉันจะโหลดรูปภาพจากไดเรกทอรีภายในเครื่องและรวมไว้ในreactjs img srcแท็กได้อย่างไร ฉันมีภาพที่เรียกว่าone.jpegภายในโฟลเดอร์เดียวกับองค์ประกอบของฉันและฉันพยายามทั้งสอง<img src="one.jpeg" />และ<img src={"one.jpeg"} />ภายในrenderฟังก์ชั่นของฉันแต่ภาพไม่ปรากฏขึ้น นอกจากนี้ฉันไม่สามารถเข้าถึงwebpack configไฟล์ได้เนื่องจากโครงการถูกสร้างขึ้นด้วยการใช้create-react-appบรรทัดคำสั่งอย่างเป็นทางการ ปรับปรุง: งานนี้ถ้าครั้งแรกที่ผมนำเข้าภาพที่มีimport img from './one.jpeg'และใช้งานได้ภายในแต่ฉันมีไฟล์ภาพจำนวนมากดังนั้นเพื่อการนำเข้าและดังนั้นฉันต้องการที่จะใช้พวกเขาในรูปแบบimg src={img}img src={'image_name.jpeg'}

167 reactjs 

ฉันสามารถเข้าถึงจุดสิ้นสุดนี้http://catfacts-api.appspot.com/api/facts?number=99ผ่านบุรุษไปรษณีย์และได้รับผลตอบแทนJSON นอกจากนี้ฉันกำลังใช้ create-react-app และต้องการหลีกเลี่ยงการตั้งค่าเซิร์ฟเวอร์ใด ๆ ในรหัสลูกค้าของฉันฉันพยายามที่จะใช้fetchเพื่อทำสิ่งเดียวกัน แต่ฉันได้รับข้อผิดพลาด: ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ แหล่งกำเนิด ' http: // localhost: 3000 ' จึงไม่ได้รับอนุญาตให้เข้าถึง หากการตอบกลับทึบแสงตอบสนองความต้องการของคุณให้ตั้งค่าโหมดคำขอเป็น 'no-cors' เพื่อดึงข้อมูลทรัพยากรโดยปิดการใช้งาน CORS ดังนั้นฉันพยายามส่งผ่านวัตถุไปยัง Fetch ของฉันซึ่งจะปิดใช้งาน CORS ดังนี้: fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'}) .then(blob => blob.json()) .then(data => { console.table(data); return data; }) .catch(e => { console.log(e); return e; }); น่าสนใจพอที่ข้อผิดพลาดที่ฉันได้รับเป็นข้อผิดพลาดทางไวยากรณ์ของฟังก์ชันนี้ ฉันไม่แน่ใจว่าจริงของฉันfetchเสียเพราะเมื่อฉันลบวัตถุ …

167 javascript  reactjs  cors  create-react-app  fetch-api 

ขณะนี้ฉันกำลังเข้าสู่บทเรียนแบบโต้ตอบ React-Native ฉันเริ่มต้นด้วยการสอนการเริ่มต้นใช้งานซึ่งฉันสร้างโปรเจ็คต์แบบเนทีฟใหม่และสามารถจัดการโปรเจ็กต์บนอุปกรณ์ของฉันได้สำเร็จ จากนั้นฉันก็เริ่มต้นบทช่วยสอนอุปกรณ์ประกอบฉากฉันคัดลอกข้อมูลโค้ดและพยายามเรียกใช้โครงการอีกครั้งและมีข้อความแสดงข้อผิดพลาดต่อไปนี้ปรากฏขึ้นบนหน้าจอ:

166 javascript  facebook  reactjs  react-native 

ใน React 16.2 Fragmentsมีการเพิ่มการสนับสนุนที่ปรับปรุงแล้ว ข้อมูลเพิ่มเติมสามารถดูได้ที่โพสต์บล็อกของ React ที่นี่ เราทุกคนคุ้นเคยกับรหัสต่อไปนี้: render() { return ( // Extraneous div element :( <div> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </div> ); } ใช่เราต้องการ div container แต่ก็ไม่ใช่เรื่องใหญ่ ใน React 16.2 เราสามารถทำได้เพื่อหลีกเลี่ยง div container ที่อยู่โดยรอบ: render() { return ( <Fragment> Some text. …

165 reactjs 

ฉันพยายามเขียนองค์ประกอบ React สำหรับแท็กส่วนหัว html (h1, h2, h3, ฯลฯ ... ) ซึ่งลำดับความสำคัญหัวเรื่องเปลี่ยนแปลงแบบไดนามิกตามลำดับความสำคัญที่เราได้กำหนดไว้ในอุปกรณ์ประกอบฉาก นี่คือสิ่งที่ฉันพยายามทำ <h{this.props.priority}>Hello</h{this.props.priority}> ผลลัพธ์ที่คาดหวัง: <h1>Hello</h1> สิ่งนี้ไม่ทำงาน มีวิธีใดที่เป็นไปได้ในการทำเช่นนี้?

163 reactjs  jsx 

บางคนสามารถอธิบายความแตกต่างระหว่าง <Route exact path="/" component={Home} /> และ <Route path="/" component={Home} /> ฉันไม่รู้ความหมายของ 'แน่นอน'

162 reactjs  react-router  react-router-dom 

ฉันมีสถานะดังต่อไปนี้: this.setState({ selected: { id: 1, name: 'Foobar' } }); จากนั้นฉันจะอัปเดตสถานะ: this.setState({ selected: { name: 'Barfoo' }}); เนื่องจากsetStateคาดว่าจะรวมฉันจะคาดหวังว่ามันจะเป็น: { selected: { id: 1, name: 'Barfoo' } }; แต่มันกิน id และสถานะคือ: { selected: { name: 'Barfoo' } }; นี่เป็นพฤติกรรมที่คาดหวังหรือไม่และนี่คือวิธีแก้ปัญหาในการอัปเดตคุณสมบัติเดียวของวัตถุสถานะซ้อนกันหรือไม่

160 javascript  reactjs 

react-native run-androidคำสั่งยกเลิกโดยการฝากข้อความไว้ในโปรแกรมจำลอง android ข้อความดังต่อไปนี้: ไม่สามารถโหลดสคริปต์ตรวจสอบให้แน่ใจว่าคุณกำลังเรียกใช้เซิร์ฟเวอร์ Metro หรือว่าชุด 'index.android.bundle' ของคุณถูกบรรจุอย่างถูกต้องสำหรับการเปิดตัว ผมทำอะไรผิดหรือเปล่า?

160 reactjs  react-native  react-native-android  react-native-cli  metro-bundler 

ฉันจะรับความสูงวิวพอร์ตใน ReactJS ได้อย่างไร ในจาวาสคริปต์ปกติฉันใช้ window.innerHeight() แต่ใช้ ReactJS ฉันไม่แน่ใจว่าจะรับข้อมูลนี้ได้อย่างไร ความเข้าใจของฉันคือ ReactDOM.findDomNode() ใช้งานได้กับส่วนประกอบที่สร้างขึ้นเท่านั้น อย่างไรก็ตามนี่ไม่ใช่กรณีสำหรับdocumentหรือbodyองค์ประกอบซึ่งอาจให้ความสูงของหน้าต่าง

160 javascript  reactjs  window  viewport 

นี่คือสิ่งที่ฉันพยายามและมันผิดพลาดอย่างไร งานนี้: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> สิ่งนี้ไม่: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> คุณสมบัติคำอธิบายเป็นเพียงสตริงปกติของเนื้อหา HTML อย่างไรก็ตามมันแสดงผลเป็นสตริงไม่ใช่ HTML ด้วยเหตุผลบางประการ ข้อเสนอแนะใด ๆ

160 javascript  html  reactjs  jsx 

ฉันสำรวจความเป็นไปได้ของการตอบสนองพื้นเมืองขณะที่การพัฒนาแอพพลิเคสาธิตที่มีระบบนำทางที่กำหนดเองระหว่างมุมมองด้วยความช่วยเหลือขององค์ประกอบNavigator แอปคลาสหลักแสดงผลเนวิเกเตอร์และภายในrenderSceneส่งคืนคอมโพเนนต์ที่ผ่าน: class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}} configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createElement(route.component, { navigator }); } }} /> ); } } สำหรับแอพตอนนี้มีสองมุมมอง: …

158 javascript  ios  navigation  reactjs  react-native 

var MySelect = React.createClass({ change: function(){ return document.querySelector('#lang').value; }, render: function(){ return( <div> <select id="lang"> <option value="select" onChange={this.change}>Select</option> <option value="Java" onChange={this.change}>Java</option> <option value="C++" onChange={this.change}>C++</option> </select> <p></p> <p value={this.change}></p> </div> ); } }); React.render(<MySelect />, document.body); onChangeเหตุการณ์ไม่ทำงาน

158 javascript  reactjs 

ฉันต้องการเพิ่มคลาสแบบไดนามิกในรายการคลาสปกติ แต่ไม่ทราบว่า (ฉันใช้ babel) ได้อย่างไรเช่นนี้: <div className="wrapper searchDiv {this.state.something}"> ... </div> ความคิดใด ๆ

158 css  reactjs 

ฉันเขียนรหัสบางส่วน: function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } ฉันได้รับข้อผิดพลาด: ประเภทองค์ประกอบ JSX Elemไม่มีการสร้างหรือลายเซ็นการโทรใด ๆ มันหมายความว่าอะไร?

158 reactjs  typescript  material-ui