আক্রমণকারী লঙ্ঘন: _রেজিস্টর কম্পোনেন্ট (…): টার্গেটের ধারকটি কোনও ডিওএম উপাদান নয়

387

একটি তুচ্ছ প্রতিক্রিয়া উদাহরণ পৃষ্ঠা তৈরি করার পরে আমি এই ত্রুটিটি পেয়েছি:

আনকচড ত্রুটি: আক্রমণকারী লঙ্ঘন: _registerComp घटक (...): টার্গেট ধারকটি কোনও ডোম উপাদান নয়।

আমার কোডটি এখানে:

/** @jsx React.DOM */
'use strict';

var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

React.renderComponent(<App />, document.body);

এইচটিএমএল:

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

এটার মানে কি?

javascript dom reactjs

— ড্যান আব্রামভ
সূত্র

8

@ গো-ওলেগ: এটি ES6 সংক্ষিপ্ত স্বরলিপি। এটি ইস্যু নয় কারণ প্রতিক্রিয়া-সরঞ্জামগুলির ES6 ট্রান্সপোর্টার রয়েছে। এখানে দেখুন

— ড্যান আব্রামভ

14

আমি এই একই ত্রুটিতে দৌড়েছি এবং অন্যেরা যেমন পরামর্শ দিয়েছে, এটি কারণ আপনার বান্ডেল.জেএস ফাইলটি খুব তাড়াতাড়ি লোড হচ্ছে। এই ত্রুটিটি সমাধান করার জন্য আপনার <script> ট্যাগটি দেহে প্রবেশ করুন (শেষ হওয়ার আগে শেষ লাইন হিসাবে </body> ট্যাগ)।

— টড আর

2

— Thats

@ ড্যাসলিচ আশা করি আপনি আপনার উত্তরটি খুঁজে পেয়েছেন তবে ঠিক তাই বলা হয়েছে: ডাবল চেক করুন যে আপনি ক্লাস এবং আইডির মিশ্রণ করছেন না। document.getElementById ("foo") কখনই নয়, <ট্যাগ> = foo "> পড়ার মতো ট্যাগ খুঁজে পাবে না

— ডেভ ক্যান্টার

625

সময় স্ক্রিপ্ট কার্যকর করা হয়, documentউপাদান এখনও পাওয়া যায় না, কারণ scriptনিজেই head। যদিও এটা রাখার একটি বৈধ সমাধান scriptমধ্যে headএবং উপর রেন্ডার DOMContentLoadedঘটনা , এটা আরও ভাল করতে আপনার করা scriptখুব নীচে থাকা body এবং একটি রুট উপাদান রেন্ডার divভালো এটা আগে:

<html>
<head>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

এবং ইন bundle.js, কল:

React.render(<App />, document.getElementById('root'));

এর divপরিবর্তে আপনার সর্বদা নেস্ট করা উচিত body। অন্যথায়, তৃতীয় পক্ষের কোডের সমস্ত প্রকারের (গুগল ফন্ট লোডার, ব্রাউজার প্লাগইনগুলি, যাই হোক না কেন) bodyডোম নোডকে পরিবর্তন করতে পারে যখন প্রতিক্রিয়াটি এর প্রত্যাশা না করে এবং অদ্ভুত ত্রুটিগুলি সৃষ্টি করতে পারে যা সনাক্ত এবং ডিবাগ করা খুব শক্ত। এই সমস্যা সম্পর্কে আরও পড়ুন।

scriptনীচে রাখার দুর্দান্ত জিনিসটি হ'ল আপনি যদি আপনার প্রকল্পে সার্ভারের প্রতিক্রিয়াটিকে রিঅ্যাক্ট করে যোগ করেন তবে স্ক্রিপ্ট লোড হওয়া পর্যন্ত এটি রেন্ডারিংকে আটকাবে না।

আপডেট: (07 অক্টোবর, 2015 | v0.14 )

React.renderঅবচয় করা হয়েছে, ReactDOM.render পরিবর্তে ব্যবহার করুন।

উদাহরণ:

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

— ড্যান আব্রামভ
সূত্র

3

আমি ওয়েবপ্যাকে আমদানি বিবৃতি ব্যবহার করছি এবং এখনও এই ত্রুটি পেয়েছি। আমি ভেবেছিলাম ওয়েবপ্যাকটি নং স্ক্রিপ্ট লোড করার ক্রমটি যত্ন নেবে?

— থিয়েটারিস্টোর

4

ডিফার <স্ক্রিপ্ট ডিফার src = " fb.me/react-0.14.7.js " > << স্ক্রিপ্ট> <স্ক্রিপ্ট ডিফার src =" fb.me/react-dom-0.14.7.js"></ স্ক্রিপ্ট > <! - আপনার অ্যাপ্লিকেশন কোডটি এখন -> <স্ক্রিপ্ট ডিফার src = "app.js"> </script> </body>

— অবতরণ করেছে

4

@ থ্রিস্ট্রিস্টো নো, ওয়েবপ্যাকটি আপনার চালিত ডিওএম নোডগুলির সাথে আপনার অ্যাপ্লিকেশনটির বান্ডিলের আপেক্ষিক স্থান সম্পর্কে কোনও জ্ঞান রাখে না।

— ড্যান আব্রামভ

1

এই ধরনের ক্রিপ্টিক ত্রুটি - কেবলমাত্র

— ডিভের

1

এটি @ ডানআব্রামভের ক্ষেত্রে নয় তবে সম্পূর্ণ ক্লোজিং ট্যাগ ছাড়াই টার্গেট কনটেইনার ব্যবহার করে আমি একই ত্রুটি পেয়েছি (উদাহরণস্বরূপ <বিভাগ আইডি = "" />)

— ক্রিস

53

`/index.html`

<!doctype html>
<html>
  <head>
    <title>My Application</title>
    <!-- load application bundle asynchronously -->
    <script async src="/app.js"></script>
    <style type="text/css">
      /* pre-rendered critical path CSS (see isomorphic-style-loader) */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
    </div>
  </body>
</html>

`/app.js`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

function run() {
  ReactDOM.render(<App />, document.getElementById('app'));
}

const loadedStates = ['complete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

(IE9 + +)

দ্রষ্টব্য : <script async src="..."></script>শিরোনামে থাকা নিশ্চিত করে যে ব্রাউজারটি এইচটিএমএল সামগ্রী লোড হওয়ার আগে জাভাস্ক্রিপ্ট বান্ডিলটি ডাউনলোড শুরু করবে ।

উত্স: প্রতিক্রিয়া স্টার্টার কিট , আইসোমরফিক-স্টাইল-লোডার

— কনস্ট্যান্টিন তারকাস
সূত্র

5

এটি ReactDOM.renderপরিবর্তে হয় React.render।

— কনরাডো ফোনসেকা

সতর্কতা দ্রষ্টব্য: আপনি যদি অ্যাসিক্রোনালি লোডের জন্য আপনার প্রতিক্রিয়াটি সেট করেন তবে এটি একটি রেসের শর্ত তৈরি করে- যদি জেএস কার্যকর করার আগে ব্রাউজারটি পৃষ্ঠাটি পার্সিং শেষ করে, আপনি ঠিক আছেন। পৃষ্ঠাটি বিশ্লেষণের আগে যদি জেএস লোড করা হয় তবে আপনি যে প্রশ্নটিই করছেন সে একই সমস্যাটি শেষ করবেন। deferআরও ভাল বিকল্প হতে পারে

— ব্রাস্মসসেন

16

প্রস্তুত ফাংশন ভালো ব্যবহার করা যেতে পারে:

$(document).ready(function () {
  React.render(<App />, document.body);
});

আপনি jQuery ব্যবহার করতে না চাইলে, আপনি onloadফাংশনটি ব্যবহার করতে পারেন :

<body onload="initReact()">...</body>

— নীল পিটারসোহন
সূত্র

6

আমি মনে করি DOMContentLoadedএমনকি হ্যান্ডেল করা আরও উপযুক্ত হবে load( jQuery এটি ব্যবহার করে )। আপনি জেএসে এটিও করতে পারেন window.addEventListener, ইনলাইন হ্যান্ডলার এবং বৈশ্বিক ফাংশনের প্রয়োজন নেই।

— ড্যান আব্রামভ

3

দ্রষ্টব্য, রেন্ডার কম্পোনেন্টটি অবমূল্যায়ন করা হবে। পরিবর্তে React.render () ব্যবহার করুন।

— টমমিক্সি

2

আমি প্রতিক্রিয়া-রেলগুলি ব্যবহার করছি তাই বডি ট্যাগের নীচে স্ক্রিপ্ট ট্যাগ সরানো কোনও বিকল্প ছিল না। $(document).readyসমস্যার সমাধান। ওহ এবং হ্যা এর renderপরিবর্তে ব্যবহার করুন renderComponent।

— ltrainpr

1

প্রতিক্রিয়া সহ jQuery ব্যবহার করা অত্যন্ত চর্চা। উভয়ই ব্যবহার করুন তবে একই সাথে উভয়ই নয়।

— সামগ্রিক

11

কেবলমাত্র একটি বুনো অনুমান, কীভাবে নীচের সূচকে html যুক্ত করবেন:

type="javascript"

এটার মত:

<script type="javascript" src="public/bundle.js"> </script>

আমার জন্য এটি কাজ! :-)

— taquiles
সূত্র

3

শুধু এফওয়াইআই, এটি আমার জন্য সমস্যা তৈরি করেছিল যেখানে type="text/javascript"যথাযথভাবে কাজ করে।

— স্টিজেবার্গার

এটা ভয়াবহ যে আসলে আমার সমস্যা স্থির। একধরণের দুঃখজনক, তবে নিশ্চিত নয় যে এইটিকে দায়ী করবেন, প্রতিক্রিয়া বা বাবেল?

— উইলিয়াম হাওলি

6

আমি একই ত্রুটি মধ্যে দৌড়ে। এটি থেকে আমার কোডটি পরিবর্তন করার পরে এটি একটি সাধারণ টাইপোর কারণে ঘটেছিল:

document.getElementById('root')

প্রতি

document.querySelector('root')

অনুপস্থিত '#' লক্ষ্য করুন এটি হওয়া উচিত ছিল

document.querySelector('#root')

কেবল অন্যদের জন্য এই ত্রুটি সমাধান করতে সহায়তা করে পোস্ট করা।

— mangakid
সূত্র

4

হ্যাঁ, মূলত আপনি যা করেছেন তা সঠিক, আপনি যদি ভুলে যান না যে জাভাস্ক্রিপ্ট অনেক ক্ষেত্রে সিঙ্ক হচ্ছে, সুতরাং আপনার ডমটি লোড হওয়ার আগে আপনি কোডটি চালাচ্ছেন , এর সমাধানের কয়েকটি উপায় রয়েছে:

1) ডিওএম পুরোপুরি লোড হয়েছে কিনা তা যাচাই করুন , তারপরে আপনি যা চান তা করুন, উদাহরণস্বরূপ আপনি ডমকন্টেন্টলয়েড শুনতে পারেন :

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

2) খুব সাধারণ উপায়ে আপনার document(বডি ট্যাগের পরে) এর নীচে স্ক্রিপ্ট ট্যাগ যুক্ত করা হচ্ছে :

<html>
  <head>
  </head>
  <body>
  </body>
  <script src="/bundle.js"></script>
</html>

3) window.onloadপুরো পৃষ্ঠাটি লোড করা হলে (ইমজি ইত্যাদি) গুলি ব্যবহার করা হয় Using

window.addEventListener("load", function() {
  console.log("Everything is loaded");
});

4) ব্যবহার document.onload, যা ডিওএম প্রস্তুত হলে বরখাস্ত হয়:

document.addEventListener("load", function() {
  console.log("DOM is ready");
});

ডম প্রস্তুত কিনা তা পরীক্ষা করার জন্য আরও আরও বিকল্প রয়েছে তবে সংক্ষিপ্ত উত্তরটি হ'ল যে কোনও ক্ষেত্রে আপনার ডম প্রস্তুত রয়েছে তা নিশ্চিত করার আগে কোনও স্ক্রিপ্ট চালাবেন না ...

জাভাস্ক্রিপ্ট সঙ্গে কাজ করা করে DOM উপাদান এবং যদি তারা উপলব্ধ নয়, ফিরে আসবে নাল , সমগ্র আবেদন ভাঙতে পারে ... তাই সবসময় নিশ্চিত করুন যে আপনি সম্পূর্ণরূপে আপনার JavaScript চালানোর জন্য আগে আপনি কি প্রস্তুত হয় করুন ...

— আলিরেজা
সূত্র

2

যদি আপনি আপনার প্রতিক্রিয়াটি রেন্ডারিংয়ের জন্য ওয়েবপ্যাক ব্যবহার করেন এবং আপনার প্রতিক্রিয়াতে এইচটিএমএল ওয়েবপ্যাক প্লাগিন ব্যবহার করেন, এই প্লাগইনটি তার খালি সূচক html নিজেই তৈরি করে এবং এতে জেএস ফাইলটি ইনজেক্ট করে, সুতরাং এটিতে ডিভ এলিমেন্ট থাকে না, এইচটিএমএল ওয়েবপ্যাকপ্লাগিন ডক্স হিসাবে আপনি নিজের ইন্ডেক্স তৈরি করতে পারেন। এইচটিএমএল এবং আমার ওয়েবপ্যাক.config.js এ এই প্লাগইনটিতে তার ঠিকানা দিন

plugins: [            
    new HtmlWebpackPlugin({
        title: 'dev',
        template: 'dist/index.html'
    })
],

এবং এটি আমার সূচি। html ফাইল

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="">
    <meta name="viewport" content="width=device-width">
    <title>Epos report</title>
</head>
<body>
   <div id="app"></div>
   <script src="./bundle.js"></script>
</body>
</html>

— গজলেঃ জাভেরি
সূত্র

1

কেন ব্যবহার HtmlWebpackPluginএখানে প্লাগ ইন যদি এটা রেফারেন্স স্ট্যাটিক HTML ফাইল ব্যবহার করা হয়ে?

— হ্যারি Cho

1

আমার ক্ষেত্রে এই ত্রুটিটি নতুন ক্লাস প্রবর্তন করার সময় গরম পুনরায় লোডিংয়ের কারণে হয়েছিল। প্রকল্পের সেই পর্যায়ে আপনার কোডটি সংকলন করতে সাধারণ নজরদারি ব্যবহার করুন।

— মাইক্রো
সূত্র

1

যারা ReactJS.Net ব্যবহার করছেন এবং একটি প্রকাশের পরে এই ত্রুটি পেয়েছেন তাদের জন্য:

আপনার .jsx ফাইলগুলির বৈশিষ্ট্য যাচাই করুন এবং Build Actionসেট হয়ে গেছে তা নিশ্চিত করুন Content। সেগুলিতে Noneপ্রকাশিত হবে না। আমি এই এসও উত্তরটি থেকে এই সমাধানটি নিয়ে এসেছি ।

— Jecoms
সূত্র

1

আমি অনুরূপ / একই ত্রুটি বার্তায় দৌড়েছি। আমার ক্ষেত্রে, আমার কাছে লক্ষ্যবস্তু ডিওএম নোড ছিল না যা সংজ্ঞাযুক্ত রিঅ্যাক্টজেএস উপাদানটি সরবরাহ করবে। এইচটিএমএল টার্গেট নোড যথাযথ "আইডি" বা "নাম", অন্যান্য এইচটিএমএল বৈশিষ্ট্যগুলির সাথে ভালভাবে সংজ্ঞায়িত হয়েছে তা নিশ্চিত করুন (আপনার নকশার প্রয়োজনের জন্য উপযুক্ত)

— আনি কোডকোল
সূত্র

আমি একই সমস্যা ছিল। দৃষ্টিতে আমার কাছে <code> </code> বিবৃতি ছিল যেখানে শর্ত পূরণ করা হলে প্রত্যাশিত লক্ষ্য উপাদান তৈরি করা উচিত। আমার ক্ষেত্রে যথাযথ উপাদান শর্তের কারণে রেন্ডার করা হয়নি, তবে স্ক্রিপ্টটি কার্যকর করা হয়েছে এবং ডিওমে উপস্থিত নেই এমন উপাদানটিতে উপাদানটি মাউন্ট করার চেষ্টা করেছে।

— রাফাল সাইপার 13

0

এটি কেবল সহজ এইচটিএমএল সিএসএস জেএস তৈরি এবং জেএস থেকে স্ক্রিপ্ট রেন্ডার করা সহজ

mport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var destination = document.querySelector('#container');

   ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination


	);

body{

    text-align: center;
    background-color: aqua;
  padding: 50px;
  border-color: aqua;
  font-family: sans-serif;
}
#container{
  display: flex;
  justify-content: flex;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
   
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />   
    <title> app  </title>
  </head>
  <body>
 

    <div id="container">
      
    </div>

  </body>
</html>

স্নিপেট প্রসারিত করুন

— ওমর বখশ
সূত্র

0

আপনি যখন পেয়েছেন:

ত্রুটি: অপরিশোধিত ত্রুটি: লক্ষ্য ধারকটি কোনও ডিওএম উপাদান নয়।

আপনি ডোমকন্টেন্টলয়েড ইভেন্টটি ব্যবহার করতে পারেন বা আপনার <script ...></script>ট্যাগটি আপনার শরীরের নীচে নিয়ে যেতে পারেন ।

প্রারম্ভিক এইচটিএমএল ডকুমেন্টটি লোডিং শেষ করার জন্য স্টাইলশিট, চিত্র এবং সাবফ্রেমগুলির জন্য অপেক্ষা না করে পুরো প্রাথমিকভাবে লোড এবং পার্স করা হয়ে যাওয়ার পরে DOMContentLoaded ইভেন্টটি জ্বলে ওঠে।

document.addEventListener("DOMContentLoaded", function(event) {
  ReactDOM.render(<App />, document.getElementById('root'));
})

— এ-312
সূত্র