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

มีวิธีการที่เป็นระบบในการดีบักสิ่งที่ทำให้ส่วนประกอบแสดงผลซ้ำใน React หรือไม่ ฉันใส่ console.log แบบง่าย () เพื่อดูจำนวนครั้งที่มันแสดงผล แต่ฉันมีปัญหาในการหาสิ่งที่ทำให้องค์ประกอบในการแสดงหลายครั้งเช่น (4 ครั้ง) ในกรณีของฉัน มีเครื่องมือที่มีอยู่ซึ่งแสดงไทม์ไลน์และ / หรือส่วนประกอบของต้นไม้ทั้งหมดที่แสดงและการสั่งซื้อหรือไม่?

156 reactjs  redux 

มีวิธีการรวมเครื่องหมายปีกกาของ React และhrefแท็กหรือไม่? สมมติว่าเรามีค่าต่อไปนี้ในรัฐ: {this.state.id} และแอตทริบิวต์ HTML ต่อไปนี้บนแท็ก: href="#demo1" id="demo1" มีวิธีที่ฉันสามารถเพิ่มidรัฐลงในแอตทริบิวต์ HTML เพื่อรับสิ่งนี้หรือไม่: href={"#demo + {this.state.id}"} ซึ่งจะให้: #demo1

156 javascript  html  reactjs  ecmascript-6 

ฉันต้องสร้างแบบฟอร์มที่จะแสดงบางสิ่งตามค่าตอบแทนของ API ฉันกำลังทำงานกับรหัสต่อไปนี้: class App extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); //error here event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" …

155 reactjs  typescript 

ฉันกำลังลองuseEffectตัวอย่างด้านล่าง: useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); setPosts(json.data.children.map(it => it.data)); } catch (e) { console.error(e); } }, []); และฉันได้รับคำเตือนนี้ในคอนโซลของฉัน แต่การล้างข้อมูลเป็นทางเลือกสำหรับการเรียก async ที่ฉันคิด ฉันไม่แน่ใจว่าทำไมฉันถึงได้รับคำเตือนนี้ ตัวอย่างการเชื่อมโยงแซนด์บ็อกซ์ https://codesandbox.io/s/24rj871r0p

155 javascript  reactjs  react-hooks 

ฉันใช้ vscode กับ Prettier 1.7.2 และ Eslint 1.7.0 หลังจากขึ้นบรรทัดใหม่ทุกครั้งฉันจะได้รับ: [eslint] Delete 'cr' [prettier/prettier] นี่คือ. eslintrc.json: { "extends": ["airbnb", "plugin:prettier/recommended"], "env": { "jest": true, "browser": true }, "rules": { "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", "no-confusing-arrow": "off", "linebreak-style": "off", "arrow-parens": ["error", "as-needed"], "comma-dangle": [ "error", { "arrays": "always-multiline", "objects": "always-multiline", "imports": "always-multiline", "exports": …

155 reactjs  visual-studio-code  prettier  eslintrc 

คุณลักษณะดั้งเดิมดั้งเดิมที่เพิ่งเปิดตัวตอบสนองเพียงแค่ตัวอย่างแอป iOS และเอกสาร

154 android  reactjs  react-native 

นี่เป็นวิธีเดียวที่จะแสดงผล html ดิบด้วย reactjs หรือไม่ // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } }); ฉันรู้ว่ามีวิธีเจ๋ง ๆ ในการทำมาร์กอัพเนื้อหาด้วย JSX แต่ฉันสนใจที่จะแสดง html แบบ raw (ด้วยคลาสทั้งหมด, …

154 javascript  reactjs 

ฉันไม่สามารถหาวิธีตั้งค่าคุณสมบัติเริ่มต้นสำหรับส่วนประกอบของฉันโดยใช้ Typescript นี่คือซอร์สโค้ด: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } และเมื่อฉันพยายามใช้องค์ประกอบเช่นนี้ ReactDOM.render(<PageComponent />, document.getElementById("page")); ฉันได้รับข้อผิดพลาดว่าทรัพย์สินfooหายไป ฉันต้องการใช้ค่าเริ่มต้น ฉันยังพยายามใช้static defaultProps = ...ภายในองค์ประกอบ แต่ก็ไม่มีผลตามที่ฉันสงสัย src/typescript/main.tsx(8,17): error TS2324: Property 'foo' …

153 reactjs  typescript  tsx 

ฉันต้องการถามว่าประโยคสุดท้ายมีความหมายว่าอย่างไรบ้าง (ส่งออกค่าเริ่มต้น HelloWorld;) แต่ฉันไม่พบบทเรียนใด ๆ เกี่ยวกับเรื่องนี้ // hello-world.jsx import React from 'react'; class HelloWorld extends React.Component { render() { return <p>Hello, world!</p>; } } export default HelloWorld;

153 javascript  reactjs 

class PlayerControls extends React.Component { constructor(props) { super(props) this.state = { loopActive: false, shuffleActive: false, } } render() { var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon" return ( <div className="player-controls"> <FontAwesome className="player-control-icon" name='refresh' onClick={this.onToggleLoop} spin={this.state.loopActive} /> <FontAwesome className={shuffleClassName} name='random' onClick={this.onToggleShuffle} /> </div> ); } onToggleLoop(event) { // "this …

152 javascript  reactjs  this 

ฉันกำลังพยายามใช้ react hooks สำหรับปัญหาง่ายๆ const [personState,setPersonState] = useState({ DefinedObject }); ด้วยการอ้างอิงต่อไปนี้ "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } แต่ฉันยังคงได้รับข้อผิดพลาดต่อไปนี้: ./src/App.js บรรทัดที่ 7: React Hook "useState" ถูกเรียกในฟังก์ชัน "app" ซึ่งไม่ใช่ทั้งส่วนประกอบของฟังก์ชัน React หรือฟังก์ชัน React Hook ที่กำหนดเอง react-hooks / rules-of-hooks บรรทัดที่ 39: 'state' ไม่ได้กำหนดไว้ว่า no-undef ค้นหาคำหลักเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับข้อผิดพลาดแต่ละข้อ รหัสส่วนประกอบอยู่ด้านล่าง: import React, {useState} from 'react'; …

152 reactjs  react-hooks 

ฉันใช้ react กับ react-router ฉันกำลังพยายามส่งคุณสมบัติใน "ลิงก์" ของ react-router var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" …

151 javascript  reactjs  react-router 

นี่คือตัวอย่างจากหน้าแอปพลิเคชัน Google Adsense หน้าจอโหลดปรากฏขึ้นก่อนหน้าหลักแสดงให้เห็นหลังจาก ฉันไม่ทราบวิธีการทำสิ่งเดียวกันกับ React เพราะถ้าฉันทำการโหลดหน้าจอที่เรนเดอร์ด้วยองค์ประกอบ React มันจะไม่แสดงในขณะที่หน้ากำลังโหลดเพราะมันต้องรอ DOM ที่เรนเดอร์มาก่อน อัปเดต : ฉันทำตัวอย่างของวิธีการของฉันโดยใส่ตัวโหลดหน้าจอindex.htmlและลบออกในcomponentDidMount()วิธีวงจรชีวิตของReact ตัวอย่างและการตอบสนองในการโหลดหน้าจอ

150 reactjs  asynchronous  redux 

ฉันใช้ create-react-app ฉันพยายามโทรภาพจากโฟลเดอร์สาธารณะของฉันจากไฟล์ในsrc/componentsตัว ฉันได้รับข้อความแสดงข้อผิดพลาดนี้ ./src/components/website_index.js ไม่พบโมดูล: คุณพยายามที่จะนำเข้า ../../public/images/logo/WC-BlackonWhite.jpg ซึ่งอยู่นอกไดเรกทอรีโครงการ src / ไม่รองรับการนำเข้าญาตินอก src / คุณสามารถย้ายภายใน src / หรือเพิ่ม symlink ลงใน node_modules / ของโครงการ import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> ฉันได้อ่านหลายสิ่งหลายอย่างที่บอกว่าคุณสามารถนำเข้าเส้นทาง แต่นั่นก็ยังไม่ทำงานสำหรับฉัน ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. ฉันรู้ว่ามีคำถามมากมายเช่นนี้ แต่พวกเขากำลังบอกให้ฉันนำเข้าโลโก้หรือรูปภาพดังนั้นฉันจึงพลาดอะไรบางอย่างในภาพรวม

150 javascript  reactjs  webpack  create-react-app 

ฉันใช้ React.JS และเมื่อฉันทำreact-native run-android(เสียบอุปกรณ์ของฉัน) ฉันเห็นหน้าว่าง เมื่อฉันเขย่าอุปกรณ์และเลือกDebug JS Remotelyจากรายการตัวเลือกที่ฉันเห็นหน้าจอต่อไปนี้ FYI: OS: Ubuntu 16.04 Node version is: v4.6.2 java version "1.8.0_111" react": "15.4.1 react-native": "0.38.0

149 android  reactjs  react-native