Question

我有一个我想渲染的组件，它会根据传入的道具进行不同的渲染：

private void showdiag() {
    loader = findViewById(R.id.loader);
    logo= loader.findViewById(R.id.logo);
    logo.setAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate));
    loader.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            loader.setVisibility(View.GONE);
        }
    });




}

const Label = ({ data, attribute, style, link }) => ( <Link to={link} style={style}>{data ? `${data[attribute]}` : ''}</Link> );和style道具是可选的，所以我想根据它们是否存在来不同地渲染组件 - 我能想到的唯一方法就是这样，但jsx是错误的。 React的最佳实践是什么？感谢。

link

Answer 1

我会做这样的事情：

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

您应该能够安全地将未定义作为style道具

传递

Answer 2

您可以创建专门用于linkProps组件的prop，并相应地定义propTypes。在下面的示例中，道具Link分布在// 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"/>

int value;
public int calculateStuff(int integer){
    value = integer + otherNumbersAndMathStuffs;

    //more math
    return mathResults
}


public int calculateStuff(int integer){
    int value = integer + otherNumbersAndMathStuffs;

    //more math
    return mathResults
}

我希望它有所帮助。 ;）

如何在React中基于传入的道具动态渲染组件？

2 个答案: