ReactJS动态地将密钥添加到混合内容的数组中

我正在尝试使用

TypeScript

构建一个

bootstrap

v3，

ReactJS

组件

道具如下：

export interface ICheckboxProps {
    checked?: boolean;
    text: string | JSX.Element | (string | JSX.Element)[];
    onChange?: (checked: boolean) => void;
}

可以看出，

文本

可以是

字符串

，

JSX.Element

或两者的列表

这是

渲染

方法：

render(): JSX.Element {
    const { text, checked = false } = this.props;

    if (text instanceof Array) {
        // what should I do with?
    }

    return (
        <div className="checkbox">
            <label>
                <input type="checkbox" defaultChecked={checked} />{text}
            </label>
        </div>
    );
}

render（）：JSX.Element{
const{text，checked=false}=this.props；
if（数组的文本实例）{
//我该怎么处理？
}
返回(
{text}
);
}

在另一个组件中，我使用这个

但是，我收到以下错误/警告：

数组或迭代器中的每个子级都应该有一个唯一的“键”属性。选中

复选框的渲染方法

---

我知道它与

text

属性相关，但我不知道应该如何添加键（即使我知道文本是数组）。

您应该遍历数组，并将

键

属性应用于找到的任何JSX元素。您可以使用

React.cloneElement（）

来执行此操作

有关官方文档的更多信息：

使用

元素

作为起点克隆并返回新的React元素。结果元素将使原始元素的道具与新道具浅合并。新子女将取代现有子女<原始元素中的代码>键和<代码>参考将被保留

---

演示

常数A=（）=>条
；
常数B=（）=>bat
；
让text=[“foo”，“baz”，]；
类应用程序扩展了React.Component{
render（）{
if（数组的文本实例）{
text=text.map（（项目，idx）=>{
如果（项目类型=='string'）{
退货项目；
}
返回React.cloneElement（文本[idx]，{key:idx}）
});
}
返回(
{text}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
我认为如果需要text+JSX，最好将
text
声明为单个JSX元素，然后将其包装在
中：

<Checkbox text={<div> "I accept the " 
  <Oem.ExternalLink href={"https://some.link.here"} linkText={"terms & conditions"} />
  </div>}
/>



编辑：更好的方法是使用推荐的方式使用JSX子级：

<Checkbox>
  <div>
    "I accept the "
    <Oem.ExternalLink 
       href={"https://some.link.here"}
       linkText={"terms & conditions"} 
    />
  </div>
</Checkbox>


“我接受”

然后在复选框组件中：

render(): JSX.Element {
    const { children, checked = false } = this.props;
    return (
        <div className="checkbox">
            <label>
                <input type="checkbox" defaultChecked={checked} />
                {children}
            </label>
        </div>
    );
}

render（）：JSX.Element{
const{children，checked=false}=this.props；
返回(
{儿童}
);
}
if

必须将内部

更改为
typeof item==“string”
，因为
item instanceof string
似乎不起作用。但最终，这起了作用。谢谢。@KingKerosin，是的，很抱歉。我还添加了一个演示。
render(): JSX.Element {
    const { children, checked = false } = this.props;
    return (
        <div className="checkbox">
            <label>
                <input type="checkbox" defaultChecked={checked} />
                {children}
            </label>
        </div>
    );
}