প্রতিক্রিয়া রেন্ডার ফাংশনে গতিশীল href কীভাবে তৈরি করবেন?


105

আমি পোস্টগুলির একটি তালিকা উপস্থাপন করছি। প্রতিটি পোস্টের জন্য আমি href স্ট্রিংয়ের অংশ হিসাবে পোস্ট আইডি সহ একটি অ্যাঙ্কর ট্যাগ রেন্ডার করতে চাই।

render: function(){
    return (
        <ul>
            {
                this.props.posts.map(function(post){
                    return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li>
                })
            }
        </ul>
    );

আমি কিভাবে এটা প্রতিটি পোস্টের সূরা এর রয়েছে তাই করব /posts/1, /posts/2ইত্যাদি?

উত্তর:


192

স্ট্রিং সংক্ষিপ্তকরণ ব্যবহার করুন:

href={'/posts/' + post.id}

জেএসএক্স সিনট্যাক্সটি ({...})মান হিসাবে স্ট্রিং বা এক্সপ্রেশন ব্যবহার করার অনুমতি দেয় । আপনি উভয় মিশ্রিত করতে পারবেন না। নামের হিসাবে আপনি একটি অভিব্যক্তিটির ভিতরে, মানটি গণনা করতে যে কোনও জাভাস্ক্রিপ্ট এক্সপ্রেশন ব্যবহার করতে পারেন।


1
খুব বুদ্ধিমান ধন্যবাদ!
কনার জোঁক

1
দুর্দান্ত কাজ করে তবে আপনি যদি বাবেলের মতো সংকলক ব্যবহার করেন তবে টেমপ্লেট স্ট্রিংগুলি আরও মার্জিত।
হুসিএনকে

যদি এটি একটি মেইলটো?
টল্লগার্লতাডা

@ ট্যালগার্লটাডা: কোনও পার্থক্য নেই। জেএসএক্স / জাভাস্ক্রিপ্ট স্ট্রিংয়ের আসল মান সম্পর্কে চিন্তা করে না।
ফেলিক্স ক্লিং

87

আপনি ES6 ব্যাকটিক সিনট্যাক্সও ব্যবহার করতে পারেন

<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>

এস template টেমপ্লেট আক্ষরিক সম্পর্কে আরও তথ্য


এটির কাজ করার জন্য `এবং না ব্যবহার করা দরকার?
জো লয়েড

3
হ্যাঁ ব্যাকটিকটি স্ট্রিং ইন্টারপোলেশনটির জন্য একটি নতুন এস synt সিনট্যাক্স, একটি উত্তর দিয়ে আমার উত্তর আপডেট করেছে
নাথ

2

ফেলিক্সের উত্তর ছাড়াও,

href={`/posts/${posts.id}`}

খুব ভাল কাজ করবে। এটি দুর্দান্ত কারণ এটি সমস্ত স্ট্রিং এ in


0

আপনি কি এটি চেষ্টা করতে পারেন?

পোস্টে অন্য আইটেম যেমন পোস্ট.লিংক তৈরি করুন তারপরে রেন্ডার ফাংশনে পোস্ট প্রেরণের আগে তার সাথে লিঙ্কটি বরাদ্দ করুন ।

post.link = '/posts/+ id.toString();

সুতরাং, উপরের রেন্ডার ফাংশনটি পরিবর্তে অনুসরণ করা উচিত।

return <li key={post.id}><a href={post.link}>{post.title}</a></li>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.