着信小道具に基づいて、どのようにコンポーネントを動的にレンダリングしますか？

Question

私はそれが入ってくる小道具に基づいて、異なるレンダリングされますレンダリングするコンポーネントがあります。

const Label = ({ data, attribute, style, link }) => (
    <Link to={link} style={style}>{data ? `${data[attribute]}` : ''}</Link> 
); 

styleとlink小道具はので、私は違った、彼らが存在するか否かに基づいて、コンポーネントをレンダリングするオプションです - 私がそれをすることを考えることができる唯一の方法は、このようなものですが、jsxは間違っています。 Reactのベストプラクティスは何ですか？ありがとう。

const Label = ({ data, attribute, style, link }) => (
    if(link && style) { 
    <Link to={link} style={style}>{data ? `${data[attribute]}` : ''}</Link> 
    } else if (link) { 
    <Link to={link}>{data ? `${data[attribute]}` : ''}</Link> 
    } 
    //... 
); 

Answer 1

私はこのようなものだろう：あなたは安全にあなたがLinkコンポーネントのために特別に使用する小道具を作成することができますstyle小道具

Answer 2

として未定義を渡すことができるはず

const Label = ({ data, attribute, style, link }) => { 
    if (link) { 
    return (
     <Link to={link} style={style}>{data ? `${data[attribute]}` : ''}</Link> 
    ); 
    } 
    // ... 
}; 

をそれに応じてpropTypeを定義します。以下の例では、LinkコンポーネントにlinkPropsの小道が広がっています。

// a simulation, just to make my point... 
 
const Link = props => (<div {...props} />); 
 

 

 
const Label = ({ data, attribute, linkProps = {}}) => (
 
    <Link {...linkProps}> 
 
    {data ? `${data[attribute]}` : ''} 
 
    </Link> 
 
); 
 

 
Label.propTypes = { 
 
    data: React.PropTypes.object.isRequired, 
 
    attribute: React.PropTypes.string.isRequired, 
 
    linkProps: React.PropTypes.shape({ 
 
    style: React.PropTypes.object, 
 
    to: React.PropTypes.string 
 
    }) 
 
}; 
 

 

 
class Main extends React.Component { 
 
    render() { 
 
    const data = { label: 'Hello!' }; 
 
    const linkProps = { 
 
     style: { fontWeight: 'bold' } 
 
    }; 
 

 
    return (
 
     <div> 
 
     <Label data={data} attribute='label' /> 
 
     <Label data={data} attribute='label' linkProps={linkProps}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Main />, document.getElementById('main'));

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

 
<div id="main"/>

私はそれが役に立てば幸い。 ;）