React - JSX 条件标签

Question

我有一个Todo组件。我的ToDoContainer使用fetch下载所有的待办事项。响应如下：

[
    { id: 0, checked: 1, text: "bla bla" },
    { id: 1, checked: 0, text: "bla bla 2" }
]

在成功获取我的待办事项后，我将它们从TodoContainer传递给渲染它们的Todo组件。

不幸的是，我无法使其工作：

<li>
    <input type="checkbox" />
    { this.props.text }
</li>

如何传递复选框的选中状态信息？

我尝试过以下方法：

<li>
    <input type="checkbox" {this.props.checked ? 'not', 'working') />
    { this.props.text }
</li>

但是在JSX中似乎不能在标签内使用{}？

官方指南也没有帮助，因为像这样做：

render() {
    let todoInput = null;
    if (this.props.checked) {
        todoInput = '<input type="checkbox" checked />';
    }
    else {
        todoInput = '<input type="checkbox"/>';
    }

    return (
        <li>
            { todoInput } { this.props.text }
        </li>
    );
}

这样做不起作用，因为它只呈现HTML（而不是输入本身），我不想为此创建新组件或危险地设置HTML。

有什么提示吗？:(

- Wordpressor

---

checked={this.state.xxxx} 请将此处翻译为中文。 - undefined

请查看此链接：https://dev59.com/wZvga4cB1Zd3GeqP4p0O#40036048 - undefined

你如何将响应从ToDoContainer传递到Todo？ - undefined

@Ric 求求你了，现在我甚至无法通过onChange函数取消选中我的复选框。 - undefined

我已经准备了一个例子：https://stackblitz.com/edit/react-q9zwwc?file=index.js - undefined

Answer 1

您可以使用：

<input type="checkbox" checked={this.props.checked} />

---

OR

删除单引号

来自：

todoInput = '<input type="checkbox" checked />';

像这样：

todoInput = <input type="checkbox" checked />;

---

或者

条件标签：

this.props.checked ? <CompA /> : <CompB />;

- Vivek Doshi

---

哇，谢谢，但是我不能用其他方法吗？比如在jsx本身使用IF语句？而不是像foo ? 'bar' : 'bar2'那样需要额外的5行代码。在HTML中，checked=1和checked=0以及checked=anything都是被选中的，据我所知。 - undefined

是的，如果它是元素，你可以只去掉单引号，它就会起作用。 - undefined

很遗憾，它并没有按预期工作。一旦我设置了“checked”，就无法取消输入。onChange处理程序也不起作用。 - undefined

@VivekDoshi 这只是我拼凑出来的一个例子。希望对你有所帮助。 - undefined