如何不渲染reactjs中的组件特定部分

问题描述

在父母中，我用一些道具渲染子组件，例如：

const Parent = () => {
  return (
    <div>
      <Child
        owner="Owner: Etta Bradley"
        buttonValue="10 cards"
      />
    </div>
  )
};

这是我的Child组件：

const Child = ({ owner,buttonValue) => {
  return (
    <div>
      <span>{owner}</span>
      <input type="button" value={buttonValue} />
    </div>
  )
};

对我来说效果很好，但是在某些情况下我不需要buttonValue。现在，我的问题是，在那种情况下我该如何不渲染我的<input type="button" value={buttonValue} />部分？因为空按钮看起来很丑。

谢谢。

解决方法

如果基于buttonValue是否有数据进行渲染，则可以使用三元运算符。

const Child = ({ owner,buttonValue }) => {
  return (
    <div>
      <span>{owner}</span>
      { buttonValue ? <input type="button" value={buttonValue} /> : null}
    </div>
  )
};

可以使用其他任何逻辑代替buttonValue布尔检查。

您将检查buttonValue是否为真。

const Child = ({ owner,buttonValue }) => {
  return (
    <div>
      <span>{owner}</span>
      { 
        buttonValue && <input type="button" value={ buttonValue } /> 
      }
    </div>
  )
};

如果buttonValue为true，则输入将呈现，否则，则不会。

reactjs reactjs