Как добавить значок внутри Реагировать, если условие

Question

так что у меня есть рендеринг Todo {текст}

Как я могу добавить условие внутри 'li' следующим образом:

если (выполнено) {сделать это}

еще{сделать это}?

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Answer 1

Вы можете использовать троичный оператор так же, как и для своего textDecoration.

Пример

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? "line-through" : "none"
    }}
  >
    {text}
    {completed ? (
      <img src="https://picsum.photos/g/200/200/?random" />
    ) : (
      <img src="https://picsum.photos/200/200/?random" />
    )}
  </li>
);

ReactDOM.render(
  <Todo onClick={() => {}} completed text="Foo" />,
  document.getElementById("root")
);

<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>

<div id="root"></div>