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

ฉันกำลังสร้างแบบฟอร์มใน React Native และต้องการทำให้TextInput80% ของความกว้างหน้าจอ ด้วย HTML และ CSS ธรรมดาสิ่งนี้จะตรงไปตรงมา: input { display: block; width: 80%; margin: auto; } ยกเว้นว่า React Native ไม่รองรับdisplayคุณสมบัติเปอร์เซ็นต์ความกว้างหรือระยะขอบอัตโนมัติ แล้วฉันจะทำอย่างไรดี? มีการอภิปรายเกี่ยวกับปัญหานี้ในเครื่องมือติดตามปัญหาของ React Native แต่วิธีแก้ปัญหาที่เสนอดูเหมือนเป็นการแฮ็กที่น่ารังเกียจ

105 javascript  css  reactjs  react-native 

ฉันสร้างแอพด้วยReactNativeทั้งสำหรับ iOS และ Android ด้วยไฟล์ListView. เมื่อเติมข้อมูลมุมมองรายการด้วยแหล่งข้อมูลที่ถูกต้องคำเตือนต่อไปนี้จะพิมพ์ที่ด้านล่างของหน้าจอ: คำเตือน: ลูกแต่ละคนในอาร์เรย์หรือตัววนซ้ำควรมีเสา "คีย์" เฉพาะ ListViewตรวจสอบการแสดงผลของวิธีการ คำเตือนนี้มีจุดประสงค์อะไร? หลังจากข้อความพวกเขาเชื่อมโยงไปยังหน้านี้ซึ่งจะมีการพูดคุยถึงสิ่งที่แตกต่างกันโดยสมบูรณ์ซึ่งไม่มีส่วนเกี่ยวข้องกับ react native แต่ใช้ reactjs บนเว็บ My ListView สร้างขึ้นด้วยคำสั่งเหล่านี้: render() { var store = this.props.store; return ( <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader.bind(this)} renderRow={this.renderDetailItem.bind(this)} renderSeparator={this.renderSeparator.bind(this)} style={styles.listView} /> ); } แหล่งข้อมูลของฉันประกอบด้วยสิ่งต่างๆเช่น: var detailItems = []; detailItems.push( new DetailItem('plain', store.address) ); detailItems.push( new …

105 facebook  listview  reactjs  react-native 

สมมติว่าฉันมีองค์ประกอบมุมมองที่มีการแสดงผลตามเงื่อนไข: render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput มีลักษณะดังนี้: class MyInput extends React.Component { ... render(){ return ( <div> <input name={this.props.name} ref="input" type="text" value={this.props.value || …

104 javascript  reactjs 

อะไรคือความแตกต่างระหว่างตัวโหลดและปลั๊กอินใน Webpack? เอกสารสำหรับปลั๊กอินเพียงแค่พูดว่า: ใช้ปลั๊กอินเพื่อเพิ่มฟังก์ชันที่เกี่ยวข้องกับบันเดิลใน webpack ฉันรู้ว่า babel ใช้ตัวโหลดสำหรับการแปลง jsx / es2015 แต่ดูเหมือนว่างานทั่วไปอื่น ๆ (เช่น copy-webpack-plugin เป็นต้น) ให้ใช้ปลั๊กอินแทน

104 javascript  reactjs  webpack 

มีรหัสนี้อยู่ในใจ: var Component = React.createClass({ getInitialState: function () { return {position: 0}; }, componentDidMount: function () { setTimeout(this.setState({position: 1}), 3000); }, render: function () { return ( <div className="component"> {this.state.position} </div> ); } }); ReactDOM.render( <Component />, document.getElementById('main') ); สถานะไม่ควรเปลี่ยนหลังจาก 3 วินาทีเท่านั้นหรือ? มันเปลี่ยนทันที เป้าหมายหลักของฉันที่นี่คือการเปลี่ยนสถานะทุกๆ 3 วินาที (ด้วยsetInterval()) แต่เนื่องจากมันไม่ทำงานฉันจึงพยายามsetTimeout()ซึ่งก็ไม่ได้ผลเช่นกัน มีไฟอะไรไหม ขอบคุณ!

104 javascript  reactjs 

ฉันกำลังทำงานกับแอปพลิเคชันตอบกลับโดยใช้ react-router ฉันมีหน้าโครงการที่มี url ดังนี้: myapplication.com/project/unique-project-id เมื่อคอมโพเนนต์ของโปรเจ็กต์โหลดฉันจะทริกเกอร์การร้องขอข้อมูลสำหรับโปรเจ็กต์นั้นจากเหตุการณ์ componentDidMount ตอนนี้ฉันพบปัญหาที่ถ้าฉันสลับระหว่างสองโครงการโดยตรงดังนั้น id เท่านั้นที่เปลี่ยนไปเช่นนี้ ... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount ไม่ถูกทริกเกอร์อีกดังนั้นข้อมูลจึงไม่ถูกรีเฟรช มีเหตุการณ์วงจรชีวิตอื่นที่ฉันควรใช้เพื่อเรียกใช้คำขอข้อมูลของฉันหรือใช้กลยุทธ์อื่นในการแก้ไขปัญหานี้หรือไม่

104 reactjs  react-router 

ฉันใช้ผ้าสำลีกับแอป React ของฉันและฉันได้รับข้อผิดพลาดนี้: error JSX props should not use arrow functions react/jsx-no-bind และนี่คือที่ที่ฉันเรียกใช้ฟังก์ชันลูกศร (ด้านในonClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

มีวิธีใดในการป้องกันไม่ให้/#/แสดงในแถบที่อยู่ของเบราว์เซอร์เมื่อใช้ react-router? นั่นคือด้วย ReactJS เช่นการคลิกลิงก์ที่จะไปแสดงให้เห็นเส้นทางใหม่หรือlocalhost:3000/#/ localhost:3000/#/aboutขึ้นอยู่กับเส้นทาง

103 reactjs  react-router 

ฉันและทีมงานของฉันได้รับเงินทุนเพื่อเริ่มพัฒนาแอปพลิเคชันเว็บระดับองค์กร (จะไม่ลงรายละเอียดว่ามันทำอะไร) แอปพลิเคชันจะมีหน้าเว็บแยกกันหลายหน้า แต่สองหน้านั้นเน้นมากกว่าและหนักมาก - หนักมากในการโต้ตอบกับผู้ใช้จำนวนมากรูปแบบที่แสดงข้อมูลจำนวนมากการเชื่อมต่อ websocket การแชท ฯลฯ ฉันได้รับมอบหมายให้เป็นหัวหน้าสถาปนิกในโครงการดังนั้นฉันกำลังทำการวิจัยเกี่ยวกับกรอบงานเว็บล่าสุด สำหรับแบ็คเอนด์เราได้ทำการทดสอบและตัดสินใจที่จะใช้แพลตฟอร์ม Azure SQL จนถึงตอนนี้ฉันชอบการปรับปรุงที่เกิดขึ้นและกำลังทำกับ ASP.NET ด้วย Core 2.0 โดยเฉพาะ Razor engine มากกว่า ASP.NET MVC เวอร์ชันก่อนหน้า ฉันต้องการรับความคิดเห็นจากผู้เชี่ยวชาญเกี่ยวกับมีดโกน "ใหม่" เทียบกับ Angular / React และอื่น ๆ ฉันกังวลกับประสิทธิภาพมากขึ้นเป็นพิเศษ Core 2.0 Razor รองรับเฟรมเวิร์กการเรนเดอร์ฝั่งไคลเอ็นต์ได้อย่างไร ความแตกต่างเล็กน้อยหรือไม่? แอปของเราตั้งเป้าไปที่ผู้ใช้ 1,000,000 คน (พร้อมกันประมาณ 100,000 คน) ขอบคุณล่วงหน้า!

103 asp.net  angular  reactjs  razor 

สิ่งที่เรียบง่ายนี้ควรทำได้อย่างง่ายดาย แต่ฉันกำลังดึงผมออกว่ามันซับซ้อนแค่ไหน สิ่งที่ฉันต้องการทำคือทำให้การติดตั้งและการยกเลิกการต่อเชื่อมคอมโพเนนต์ React เป็นแบบเคลื่อนไหว นี่คือสิ่งที่ฉันได้ลองทำไปแล้วและสาเหตุที่แต่ละวิธีใช้ไม่ได้ผล: ReactCSSTransitionGroup - ฉันไม่ได้ใช้คลาส CSS เลยมันเป็นสไตล์ JS ทั้งหมดดังนั้นจึงใช้ไม่ได้ ReactTransitionGroup- API ระดับล่างนี้ยอดเยี่ยม แต่คุณต้องใช้การโทรกลับเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ดังนั้นเพียงแค่ใช้การเปลี่ยน CSS จะไม่ทำงานที่นี่ มีไลบรารีแอนิเมชั่นอยู่เสมอซึ่งนำไปสู่ประเด็นต่อไป: GreenSock - การออกใบอนุญาตมีข้อ จำกัด มากเกินไปสำหรับการใช้งานทางธุรกิจ IMO React Motion - ดูเหมือนจะดี แต่TransitionMotionก็สับสนและซับซ้อนเกินไปสำหรับสิ่งที่ฉันต้องการ แน่นอนว่าฉันสามารถใช้กลอุบายได้เช่นเดียวกับ UI ของวัสดุโดยที่องค์ประกอบต่างๆถูกแสดงผล แต่ยังคงซ่อนอยู่ ( left: -10000px) แต่ฉันไม่อยากไปเส้นทางนั้น ฉันคิดว่ามันแฮ็คและฉันต้องการให้ส่วนประกอบของฉันยกเลิกการต่อเชื่อมเพื่อทำความสะอาดและไม่เกะกะ DOM ฉันต้องการสิ่งที่ง่ายต่อการนำไปใช้ เมื่อเมานต์ให้สร้างชุดสไตล์ให้เคลื่อนไหว เมื่อยกเลิกการต่อเชื่อมให้เคลื่อนไหวชุดรูปแบบเดียวกัน (หรืออื่น) เสร็จแล้ว นอกจากนี้ยังต้องมีประสิทธิภาพสูงในหลายแพลตฟอร์ม ฉันเคยชนกำแพงอิฐที่นี่ หากฉันทำอะไรหายไปและมีวิธีง่ายๆในการดำเนินการนี้โปรดแจ้งให้เราทราบ

103 animation  reactjs  css-animations  gsap  react-motion 

ชื่อเรื่องบอกทุกอย่าง ฉันเข้าใจว่าเหตุใดจึงcomponentDidMountเหมาะสมสำหรับทุกสิ่งที่ต้องการการเข้าถึง DOM แต่คำขอ AJAX ไม่จำเป็นหรือมักจะต้องการสิ่งนี้ สิ่งที่ช่วยให้?

102 reactjs 

ฉันไม่เข้าใจว่าจุดประสงค์ของการใช้นั้นIndexRouteและIndexLink ดูเหมือนว่าในกรณีใด ๆ รหัสด้านล่างจะเลือกส่วนประกอบ Home ก่อนเว้นแต่จะเปิดใช้งานเส้นทาง About <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> เทียบกับ <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> ข้อดี / จุดประสงค์ของกรณีแรกคืออะไร?

102 javascript  reactjs  react-router  url-routing 

ฉันมี sidenav กับทีมบาสเก็ตบอลมากมาย ดังนั้นฉันจึงอยากจะแสดงสิ่งที่แตกต่างออกไปสำหรับแต่ละทีมเมื่อหนึ่งในนั้นถูกเลื่อน นอกจากนี้ฉันกำลังใช้ Reactjs ดังนั้นหากฉันมีตัวแปรที่ฉันสามารถส่งผ่านไปยังองค์ประกอบอื่นที่น่ากลัว

102 hover  reactjs 

ฉันกำลังพยายามทำ A SIMPLE โดยใช้ react-router ( เวอร์ชัน ^ 1.0.3 ) เพื่อเปลี่ยนเส้นทางไปยังมุมมองอื่นและฉันก็เหนื่อย import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); } handleClick = () => { console.log('HERE!', this.contextTypes); // this.context.location.transitionTo('login'); }; …

102 javascript  reactjs 

ผมจะผ่านเอกสารตะขอเมื่อฉัน stumbled useRefเมื่อ ดูตัวอย่างของพวกเขา ... function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } ... มันดูเหมือนว่าจะถูกแทนที่ด้วยuseRefcreateRef function TextInputWithFocusButton() { const inputRef …

102 javascript  reactjs  react-hooks