[英]How to implement conditional rendering in React Reusable Component?
I have this reusable component where I would like to pass a value through that if true: a button is returned and if the value is false: the button doesn't render.我有这个可重用的组件,我想通过它传递一个值,如果为真:返回一个按钮,如果值为假:按钮不呈现。 I can't figure out how to do this using reusable components.
我无法弄清楚如何使用可重用组件来做到这一点。 The boolean variable I want to use is displayButton where if it is true, then the button is rendered and if it is false then the button is not rendered.
我想使用的布尔变量是 displayButton ,如果它为真,则呈现按钮,如果为假,则不呈现按钮。
const Test = ({ name, value, onClick, purchased, displayButton }) => {
return (
<div class="cardData">
<h5>{name}</h5>
<p>Cost: {value}</p>
//if display button = true, display this button, if false, button is not displayed
<button
type="button"
onClick={onClick}
class="btn btn-primary"
value={value}
name={name}
>
Purchase
</button>
<h4>{purchased}</h4>
</div>
);
};
export default Test;
Any help would very appreciated!任何帮助将不胜感激!
const Test = ({ name, value, onClick, purchased, displayButton }) => {
return (
<div class="cardData">
<h5>{name}</h5>
<p>Cost: {value}</p>
{displayButton &&
<button
type="button"
onClick={onClick}
class="btn btn-primary"
value={value}
name={name}
>
Purchase
</button>
}
<h4>{purchased}</h4>
</div>
);
};
export default Test;
if displayButton
has the value of true
it will render the button otherwise not如果
displayButton
的值为true
它将呈现按钮,否则不会
This will work.这将起作用。
const Test = ({ name, value, onClick, purchased, displayButton }) => {
return (
<div class="cardData">
<h5>{name}</h5>
<p>Cost: {value}</p>
{ displayButton &&
<button
type="button"
onClick={onClick}
class="btn btn-primary"
value={value}
name={name}
>
Purchase
</button>
}
<h4>{purchased}</h4>
</div>
);
};
export default Test;
You can create a ShowHide
component which can be utilized for conditional-rendering instead of having logical operators in every JSX
where you need to conditionally render.您可以创建一个
ShowHide
组件,该组件可用于条件渲染,而不是在需要条件渲染的每个JSX
中使用逻辑运算符。
// create a ShowHide component const ShowHide = ({show,children} ) => show && children // your Test component with the button wrapped in ShowHide const Test = ({ name, value, onClick, purchased, displayButton }) => { return ( <div class="cardData card col-6 m-3"> <h5>{name}</h5> <p>Cost: {value}</p> <ShowHide show={displayButton}> <button type="button" onClick={onClick} class="btn btn-primary" value={value} name={name} > Purchase </button> </ShowHide> <h4>{purchased}</h4> </div> ); }; const root = document.getElementById('root'); ReactDOM.render( <Test name="My Card" value="250,000" onClick={() => alert('clicked')} purchased="Yes!" displayButton={false} />, root )
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="root"></div>
Good Luck...祝你好运...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.