কীভাবে মানচিত্র ব্যবহার করে প্রতিক্রিয়া উপাদানগুলি রেন্ডার করবেন?

Question

আমার একটি উপাদান রয়েছে যা স্ট্রিংয়ের অ্যারে প্রদর্শন করতে চলেছে। কোডটি এর মতো দেখাচ্ছে:

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

এটা পুরোপুরি ঠিকঠাক কাজ করছে। উদাহরণস্বরূপ, যদি props.data = ['tom', 'jason', 'chris'], পৃষ্ঠায় রেন্ডার ফলাফল হবে tomjasonchris।

তারপরে, আমি কমা ব্যবহার করে সমস্ত নাম যুক্ত করতে চাই, তাই আমি কোডটি এতে পরিবর্তন করি:

this.props.data.map(t => <span>t</span>).join(', ')

তবে রেন্ডারড রেজাল্ট [Object], [Object], [Object]।

রেন্ডার করতে উপাদানগুলি কীভাবে প্রতিক্রিয়াতে পরিণত হয় তা কীভাবে ব্যাখ্যা করতে হয় তা আমি জানি না। যেকোনো পরামর্শ?

Answer 1

একটি সহজ সমাধান reduce()দ্বিতীয় যুক্তি ছাড়াই এবং পূর্ববর্তী ফলাফলটি ছড়িয়ে না দিয়ে ব্যবহার করা :

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

দ্বিতীয় যুক্তি ছাড়াই 0 এর পরিবর্তে সূচী 1 এ শুরুreduce() হবে এবং নেস্টেড অ্যারেগুলিতে প্রতিক্রিয়া পুরোপুরি খুশি।

মন্তব্যে যেমন বলা হয়েছে, আপনি এটি কেবল কমপক্ষে একটি আইটেম সহ অ্যারেগুলির জন্য ব্যবহার করতে চান, কারণ reduce()দ্বিতীয় যুক্তি ছাড়াই খালি অ্যারে দিয়ে ফেলে দেওয়া হবে। সাধারণত এটি কোনও সমস্যা হবেনা, আপনি যেহেতু খালি অ্যারেগুলির জন্য 'এটি খালি' এর মতো কিছু বলে একটি কাস্টম বার্তা প্রদর্শন করতে চান।

টাইপস্ক্রিপ্টের জন্য আপডেট

আপনি এটিকে টাইপস্ক্রিপ্টে (টাইপ-অনিরাপদ ছাড়াই any) কোনও React.ReactNodeটাইপ প্যারামিটার দিয়ে ব্যবহার করতে পারেন .map():

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map<React.ReactNode>(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

Comments

If the array is empty and no initialValue was provided, TypeError would be thrown.। সুতরাং এটি খালি অ্যারের জন্য কাজ করবে না।

— ইউজিন ক্রেভেনেটস

আরও মনে রাখবেন যে এটি পুনরাবৃত্তভাবে prevঅ্যারে বাসা বেঁধেছে। যেমন [1, 2, 3, 4]হয়ে যায় [[[1,",",2],",",3],",",4]।

— তামিলেন

@ টমলিন: আপনি কি মনে করেন যে উত্তরে আপনার বক্তব্যটির আমার মূল উল্লেখটি ('নেস্টেড অ্যারেগুলিতে প্রতিক্রিয়াটি পুরোপুরি খুশি') যথেষ্ট পরিষ্কার বা আমি এ সম্পর্কে বিস্তারিত বলব?

— মার্টেন টের হর্স্ট

প্রতিক্রিয়া + টাইপস্ক্রিপ্ট দিয়ে কেউ এই সমাধানটি তৈরি করেছেন?

— ম্যাট ডেল

@ জাস্টফ আমি যে কোনওটি ব্যবহার করতে বাধ্য হয়েছি। .reduce((prev: JSX.Element, current: JSX.Element): any => [prev, (<span>&nbsp;</span>), current])

— ম্যাট ডেল 15

Answer 2

আপনি reduceএকটি অ্যারের একাধিক উপাদান একত্রিত করতে ব্যবহার করতে পারেন :

React.createClass({
  render() {
     <div>
        this.props.data
        .map(t => <span>t</span>)
        .reduce((accu, elem) => {
            return accu === null ? [elem] : [...accu, ',', elem]
        }, null)
     </div>
  }
})

এটি নাল দিয়ে সঞ্চালককে সূচনা দেয়, তাই আমরা প্রথম আইটেমটিকে একটি অ্যারেতে মোড়াতে পারি। অ্যারেতে প্রতিটি নিম্নলিখিত উপাদানগুলির জন্য, আমরা একটি নতুন অ্যারে তৈরি করি যা ব্যবহার করে পূর্ববর্তী সমস্ত উপাদান রয়েছে ...-operator, বিভাজক এবং তারপরে পরবর্তী উপাদানটি যুক্ত করে।

অ্যারে.প্রোটোটাইপ.ড্রেস ()

Comments

ধন্যবাদ, ঠিক আমার যা দরকার ছিল খালি অ্যারে হিসাবে সঞ্চয়ের শুরু করে আপনি নাল চেক এবং টেরিনারি সরাতে পারেন

— ল্যারি

@ ল্যারি যদি আপনি নাল চেক এবং টের্নারি সরিয়ে ফেলে এবং []] আরম্ভকারী হিসাবে পাস করেন তবে আপনি কীভাবে অগ্রণী কমা এড়াতে পারবেন? ['a'].reduce((a, e) => [...a, ',', e],[])ফলন [",", "a"]। অ্যারেটি খালি না হলে কোনও ইনিশিয়ালাইজার পাসিং কাজ করে না, সেই ক্ষেত্রে এটি কোনও টাইপআররের রিটার্ন দেয়।

— গাই

@ গুয় আপনি একেবারে সঠিক - আমার ত্রুটিটি হ'ল আমি ফাঁকা জায়গাগুলির সাথে মানগুলিতে যোগদান করছি, এবং রেন্ডার আউটপুটে খালি স্প্যানটি হারিয়েছি

— ল্যারি

Answer 3

প্রতিক্রিয়া 16 সহ আপডেট করুন: সরাসরি স্ট্রিংগুলি রেন্ডার করা এখন সম্ভব, যাতে আপনি সমস্ত অকেজো <span>ট্যাগগুলি মুছে আপনার কোডটি আরও সহজ করতে পারেন ।

const list = ({ data }) => data.reduce((prev, curr) => [ prev, ', ', curr ]);

Answer 4

গৃহীত উত্তরটি আসলে অ্যারেগুলির অ্যারে দেয় কারণ prevপ্রতিবার একটি অ্যারে হবে। প্রতিক্রিয়া এই কাজটি করার জন্য যথেষ্ট স্মার্ট, তবে মানচিত্রের প্রতিটি ফলাফলের চাবি দেওয়ার সময় অ্যালগরিদমকে আলাদা করে দেওয়া প্রতিক্রিয়া ভাঙার মতো ভবিষ্যতে সমস্যা তৈরি হওয়ার ঝুঁকি রয়েছে।

নতুন React.Fragmentবৈশিষ্ট্যটি অন্তর্নিহিত সমস্যাগুলি ছাড়াই আমাদের বোঝার সহজ পদ্ধতিতে এটি করতে দেয়।

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map((t, index) => 
            <React.Fragment key={index}>
              <span> {t}</span> ,
            </React.Fragment>
          )
      </div>
  }
}

সঙ্গে React.Fragmentকেবলমাত্র আমরা বিভাজক স্থাপন করতে পারেন ,ফিরে HTML- এর বাইরে এবং প্রতিক্রিয়া অভিযোগ করা হবে না।

Comments

দুর্দান্ত সমাধান, তবে আপনাকে অ্যারের শেষ উপাদানটির জন্য কমা অপসারণ করতে হবে

— ইন্ডাপেটপাবলিক ২

এটি সমাধানের জন্য আপনি সর্বদা একটি মুড়ি এবং সূচক ব্যবহার করতে পারেন।

— Jstuff

আপনি এই পরিবর্তনটি দিয়ে সর্বশেষ কমাটি সরিয়ে ফেলতে পারেন: <প্রতিক্রিয়া ra ফ্রেগমেন্ট কী = {সূচক <> <স্প্যান> {টি} </span> = সূচক === এই.পড়গুলি.ডাটা দৈর্ঘ্য - 1? '': ','} </React.Fraament>

— পি

Answer 5

<span>{t}</span>আপনি ফিরে আসছে একটি বস্তু, না একটি স্ট্রিং। এটি সম্পর্কে ডক্স প্রতিক্রিয়া চেক https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform

এর .join()থেকে ফিরে আসা অ্যারে ব্যবহার করে mapআপনি অবজেক্টের অ্যারেতে যোগ দিচ্ছেন।[object Object], ...

আপনি কমাটি ভিতরে রাখতে <span></span>পারেন যাতে এটি আপনি যেভাবে চান তেমন রেন্ডার হয়।

  render() {
    return (
      <div>
        { this.props.data.map(
            (t,i) => <span>{t}{ this.props.data.length - 1 === i ? '' : ','} </span>
          )
        }
      </div>
    )
  }

নমুনা: https://jsbin.com/xomopahalo/edit?html,js , আউটপুট

Answer 6

আমার রূপ:

{this.props.data
    .map(item => <span>{item}</span>)
    .map((item, index) => [index > 0 && ', ', item ])}

Answer 7

যদি আমি কেবল কমা দ্বারা পৃথককৃত উপাদানগুলির রেন্ডার করতে চাই তবে আমি সাধারণত reduceখুব ভার্জোজ পাই । এই ধরনের ক্ষেত্রে একটি সংক্ষিপ্ত সমাধান হয়

{arr.map((item, index) => (
  <Fragment key={item.id}>
    {index > 0 && ', '}
    <Item {...item} />
  </Fragment>
))}

{index > 0 && ', '} প্রথমটি ব্যতীত সমস্ত অ্যারে আইটেমের সামনে একটি কমা পরে একটি কমা রেন্ডার করবে।

আপনি দ্বিতীয় টু শেষ আইটেম এবং অন্য কিছু দ্বারা গত এক আলাদা করতে চান, বলতে স্ট্রিং ' and ', আপনি প্রতিস্থাপন করতে পারেন {index > 0 && ', '}সঙ্গে

{index > 0 && index !== arr.length - 1 && ', '}
{index === arr.length - 1 && ' and '}

Answer 8

এস 6 ব্যবহার করে আপনি এমন কিছু করতে পারেন:

const joinComponents = (accumulator, current) => [
  ...accumulator, 
  accumulator.length ? ', ' : '', 
  current
]

এবং তারপরে চালান:

listComponents
  .map(item => <span key={item.id}> {item.t} </span>)
  .reduce(joinComponents, [])

Answer 9

"," বাইরে রাখতে নেস্টেড অ্যারে ব্যবহার করুন।

  <div>
      {this.props.data.map((element, index) => index == this.props.data.length - 1 ? <span key={index}>{element}</span> : [<span key={index}>{element}</span>, ", "])}
  </div>

ডেটা অ্যারেতে সংরক্ষণ করে এবং সর্বশেষ উপাদানটি সর্বদা এটির শেষ উপাদানটি পরীক্ষা করে দেখার পরিবর্তে শেষ উপাদানটিকে সংশোধন করে অনুকূলিত করুন।

  let processedData = this.props.data.map((element, index) => [<span key={index}>{element}</span>, ", "])
  processedData [this.props.data.length - 1].pop()
  <div>
      {processedData}
  </div>

Answer 10

এটি আমার পক্ষে কাজ করেছে:

    {data.map( ( item, i ) => {
                  return (
                      <span key={i}>{item.propery}</span>
                    )
                  } ).reduce( ( prev, curr ) => [ prev, ', ', curr ] )}

Answer 11

পিথ দ্বারা উল্লিখিত হিসাবে , প্রতিক্রিয়া 16 আপনাকে স্ট্রিংগুলি সরাসরি ব্যবহার করার অনুমতি দেয় যাতে স্ট্রিংগুলিকে স্প্যান ট্যাগগুলিতে মোড়ানো আর প্রয়োজন হয় না। মার্টেনের উত্তরের ভিত্তিতে , আপনি যদি এখনই কোনও কাস্টম বার্তা নিয়ে ডিল করতে চান (এবং খালি অ্যারেতে কোনও ত্রুটি ছোঁড়া এড়ান), অ্যারের দৈর্ঘ্যের সম্পত্তি সম্পর্কে বিবৃতি দেওয়া থাকলে আপনি টের্নারি দিয়ে অপারেশন পরিচালনা করতে পারেন। এটি এর মতো দেখতে পারে:

class List extends React.Component {
  const { data } = this.props;

  render() {
     <div>
        {data.length
          ? data.reduce((prev, curr) => [prev, ', ', curr])
          : 'No data in the array'
        }
     </div>
  }
}

Answer 12

এটি একটি ফ্ল্যাট অ্যারে ফিরে আসা উচিত। প্রাথমিক খালি অ্যারে সরবরাহ করে অ পুনরাবৃত্তিযোগ্য প্রথম অবজেক্টের সাথে কেস হ্যান্ডেল করুন এবং ফলাফলটি থেকে প্রয়োজনীয় প্রথম কমা ফিল্টার করবেন না

[{}, 'b', 'c'].reduce((prev, curr) => [...prev, ', ', curr], []).splice(1) // => [{}, 'b', 'c']

Answer 13

আমিই কেবল সেই ব্যক্তি যারা মনে করেন যে এখানে উত্তরগুলিতে প্রচুর অযথা ছড়িয়ে পড়ে বাসা বাঁধছে? সংক্ষিপ্ত, নিশ্চিত হওয়ার জন্য পয়েন্টগুলি, তবে এটি স্কেল সম্পর্কিত ইস্যুগুলির দরজা উন্মুক্ত করে দেয় বা তারা নেস্টেড অ্যারে / টুকরোগুলি কীভাবে আচরণ করে তা পরিবর্তনের প্রতিক্রিয়া জানায়।

const joinJsxArray = (arr, joinWith) => {
  if (!arr || arr.length < 2) { return arr; }

  const out = [arr[0]];
  for (let i = 1; i < arr.length; i += 1) {
    out.push(joinWith, arr[i]);
  }
  return out;
};

// render()
<div>
  {joinJsxArray(this.props.data.map(t => <span>t</span>), ', ')}
</div>

একটি অ্যারে, বাসা বাঁধছে না। কোনও সেক্সি পদ্ধতিতে শৃঙ্খলাবদ্ধ নয়, তবে আপনি যদি নিজেকে প্রায়শই এটি করতে দেখেন তবে আপনি এটিকে সর্বদা অ্যারে প্রোটোটাইপে যুক্ত করতে পারেন বা কোনও ফাংশনে এটি মোড়ানো করতে পারেন যা ম্যাপিং কলব্যাক লাগে এবং সমস্ত কিছু একসাথে করার জন্য।

Answer 14

function YourComponent(props) {

  const criteria = [];

  if (something) {
    criteria.push(<strong>{ something }</strong>);
  }

  // join the jsx elements with `, `
  const elements = criteria.reduce((accu, elem) => {
    return accu === null ? [elem] : [...accu, ', ', elem]
  }, null);

  // render in a jsx friendly way
  return elements.map((el, index) => <React.Fragment key={ index }>{ el }</React.Fragment> );

}