আমি কীভাবে শর্তসাপেক্ষে একটি প্রতিক্রিয়া উপাদানটি মোড়ানো করব?

Question 1

আমার একটি উপাদান রয়েছে যা কখনও কখনও একটি হিসাবে <anchor>এবং অন্যান্য সময় হিসাবে রেন্ডার করা প্রয়োজন <div>। propআমি এই নির্ধারণ পড়া হয় this.props.url।

যদি এটি বিদ্যমান থাকে তবে আমাকে একটিতে আবৃত উপাদানটি রেন্ডার করতে হবে <a href={this.props.url}>। অন্যথায় এটি কেবল একটি হিসাবে রেন্ডার হয় <div/>।

সম্ভব?

আমি এই মুহূর্তে এটি করছি, তবে এটি সহজ করা যেতে পারে বলে মনে করেন:

if (this.props.link) {
    return (
        <a href={this.props.link}>
            <i>
                {this.props.count}
            </i>
        </a>
    );
}

return (
    <i className={styles.Icon}>
        {this.props.count}
    </i>
);

হালনাগাদ:

এখানে চূড়ান্ত লকআপ রয়েছে। টিপটির জন্য ধন্যবাদ, @ সুলতান !

import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

export default class CommentCount extends Component {

    static propTypes = {
        count: PropTypes.number.isRequired,
        link: PropTypes.string,
        className: PropTypes.string
    }

    render() {
        const styles = require('./CommentCount.css');
        const {link, className, count} = this.props;

        const iconClasses = classNames({
            [styles.Icon]: true,
            [className]: !link && className
        });

        const Icon = (
            <i className={iconClasses}>
                {count}
            </i>
        );

        if (link) {
            const baseClasses = classNames({
                [styles.Base]: true,
                [className]: className
            });

            return (
                <a href={link} className={baseClasses}>
                    {Icon}
                </a>
            );
        }

        return Icon;
    }
}

Question 2

শুধু একটি পরিবর্তনশীল ব্যবহার করুন।

var component = (
    <i className={styles.Icon}>
       {this.props.count}
    </i>
);

if (this.props.link) {
    return (
        <a href={this.props.link} className={baseClasses}>
            {component}
        </a>
    );
}

return component;

বা, আপনি বিষয়বস্তু রেন্ডার করতে একটি সহায়ক ফাংশন ব্যবহার করতে পারেন। জেএসএক্স হল অন্য যে কোনও কোড। আপনি যদি সদৃশ হ্রাস করতে চান তবে ফাংশন এবং ভেরিয়েবল ব্যবহার করুন।

Question 3

আপনার উপাদান মোড়ানো জন্য একটি এইচওসি (উচ্চতর অর্ডার উপাদান) তৈরি করুন:

const WithLink = ({ link, className, children }) => (link ?
  <a href={link} className={className}>
    {children}
  </a>
  : children
);

return (
  <WithLink link={this.props.link} className={baseClasses}>
    <i className={styles.Icon}>
      {this.props.count}
    </i>
  </WithLink>
);

Question 4

আমি যে সহায়ক উপাদানটি দেখেছি তার উদাহরণ এখানে দেওয়া হয়েছে (এটি নিশ্চিত নয় যে এটিকে স্বীকৃতি দেবে) যা কাজটি করে:

const ConditionalWrap = ({ condition, wrap, children }) => (
  condition ? wrap(children) : children
);

ব্যবহারের ক্ষেত্রে:

<ConditionalWrap condition={someCondition}
  wrap={children => (<a>{children}</a>)} // Can be anything
>
  This text is passed as the children arg to the wrap prop
</ConditionalWrap>

Question 5

আপনি একটি রেফারেন্স ভেরিয়েবল ব্যবহার করতে পারেন এমন আরও একটি উপায় রয়েছে

let Wrapper = React.Fragment //fallback in case you dont want to wrap your components

if(someCondition) {
    Wrapper = ParentComponent
}

return (
    <Wrapper parentProps={parentProps}>
        <Child></Child>
    </Wrapper>

)

Question 6

আপনি এটির মতো একটি ব্যবহার ফাংশনও ব্যবহার করতে পারেন:

const wrapIf = (conditions, content, wrapper) => conditions
        ? React.cloneElement(wrapper, {}, content)
        : content;

Question 7

const ConditionalWrapper = ({ condition, wrapper, children }) => 
  condition ? wrapper(children) : children;

আপনি যে উপাদানটি মোড়ানো চান

<ConditionalWrapper
   condition={link}
   wrapper={children => <a href={link}>{children}</a>}>
   <h2>{brand}</h2>
</ConditionalWrapper>

সম্ভবত এই নিবন্ধটি আপনাকে আরও সহায়তা করতে পারে https://blog.hackages.io/conditionally-wrap-an-element-in-react-a8b9a47fab2

Question 8

যদি 'অন্য হিসাবে বর্ণনা আপনি একটি JSX ব্যবহার করা উচিত এখানে । এর মতো কিছু কাজ করা উচিত।

App = React.creatClass({
    render() {
        var myComponent;
        if(typeof(this.props.url) != 'undefined') {
            myComponent = <myLink url=this.props.url>;
        }
        else {
            myComponent = <myDiv>;
        }
        return (
            <div>
                {myComponent}
            </div>
        )
    }
});

Question 9

একটি কার্যকরী উপাদান যা 2 টি উপাদান সরবরাহ করে, একটি মোড়ানো এবং অন্যটি নয়।

পদ্ধতি 1:

// The interesting part:
const WrapIf = ({ condition, With, children, ...rest }) => 
  condition 
    ? <With {...rest}>{children}</With> 
    : children

 
    
const Wrapper = ({children, ...rest}) => <h1 {...rest}>{children}</h1>


// demo app: with & without a wrapper
const App = () => [
  <WrapIf condition={true} With={Wrapper} style={{color:"red"}}>
    foo
  </WrapIf>
  ,
  <WrapIf condition={false} With={Wrapper}>
    bar
  </WrapIf>
]

ReactDOM.render(<App/>, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

এটি এর মতোও ব্যবহার করা যেতে পারে:

<WrapIf condition={true} With={"h1"}>

পদ্ধতি 2:

// The interesting part:
const Wrapper = ({ condition, children, ...props }) => condition 
  ? <h1 {...props}>{children}</h1>
  : <React.Fragment>{children}</React.Fragment>;   
    // stackoverflow prevents using <></>
  

// demo app: with & without a wrapper
const App = () => [
  <Wrapper condition={true} style={{color:"red"}}>
    foo
  </Wrapper>
  ,
  <Wrapper condition={false}>
    bar
  </Wrapper>
]

ReactDOM.render(<App/>, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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