Question

<div class='row m-b-0'>
    <div class="col-sm-6 col-md-4">...</div>
    <div class="col-sm-6 col-md-4">...</div>
    <div class="col-sm-6 col-md-4">...</div>
 </div>

当我在reactjs内实现类似jQuery的方式时，我习惯于使用jQuery，但是在react无法呈现时。

下面是我的代码。

我该如何解决？

render(){

    let tag1 = '';
    let tag2 = '';

    const wrapper = (value,i) => {
        if(i === 1 || i === 4 || i === 7 || i === 10 || i === 13){
            tag1 = "<div class='row m-b-0'>";
        } else {
            tag1 = '';
        }
        if(i === 3 || i === 6 || i === 9 || i === 12 || i === 15){
            tag2 = "</div>";
        } else {
            tag2 = '';
        }
        return (<Content data={i} value={value} tag1={tag1} tag2={tag2} />)
        }

        return(
            <Fragment>
                {
                    this.state.data.map((value,i) =>
                        wrapper(value,i)
                    )
                }
            </Fragment>
        )

    }
}

const Content = (props) => {
    return(
        <Fragment key={props.data}>
        {
            props.tag1
        }
         ...
        {
            props.tag2
        }
        </Fragment>
    )
}

Answer 1

可以在react（例如危险地设置InnerHTML或片段）中渲染“原始html”，但是使用react粘合字符串/ html部分是一种不好的做法。

React创建具有限制的（虚拟）节点（片段）-我深信它不能在另一个节点中包含标签的打开和关闭。

您必须使组件的结构更接近必需的html。在这种情况下（您没有显示数据结构），我将数据分为3个元素集，一步返回完整的（“行”）结构/片段：

return (
  <div class='row m-b-0' key={i}>
    <div class="col-sm-6 col-md-4">{subset[0]}/div>
    <div class="col-sm-6 col-md-4">{subset[1]}/div>
    <div class="col-sm-6 col-md-4">{subset[2]}/div>
  </div>
)

然后您可以进一步重构：

return (
  <div class='row m-b-0' key={i}>
    {subset.map((value,i) => (
      <div class="col-sm-6 col-md-4" key={i}>{value}</div>
    )}
  </div>
)

及以后

return (
  <div class='row m-b-0' key={i}>
    {subset.map((value,i) => renderCell(value,i) )}
  /div>
)

可能是Cell的组成部分

return (
  <Row ...props.rowProps key={i}>
    {subset.map((value,i) => <Cell value={value} i={i} ...props.cellProps/> )}
  </Row>
)

或者如果您需要简单的条件深度

if(!!props.someCond) return (
  <Row ...props.rowProps key={i}>
    {subset.map((value,i) => <Cell value={value} i={i} ...props.cellProps/> )}
  </Row>
}
return (
  <Fragment key={i}>
    {subset.map((value,i) => <Cell value={value} i={i} ...props.cellProps/> )}
  </Fragment>
}

或在JSX中，例如：

return (
  {!!props.someCond ?
  <Row ...props.rowProps key={i}>
  : <Fragment key={i}>}
  {subset.map((value,i) => <Cell value={value} i={i} ...props.cellProps/> )}
  {!!props.someCond ? </Row> : </Fragment> }
)

从某些时候开始，您可以返回多个节点，并且这样可以正常工作：

return (
  {!!props.someCond && <Row ...props.rowProps key={i}>}
  {subset.map((value,i) => <Cell value={value} i={i} ...props.cellProps/> )}
  {!!props.someCond && </Row> }
)

有很多可能性，但是您必须“以反应的方式思考”，结构化的方式；）

PS。使用取模运算符来简化条件

const openingTag = (i>0 && (i % 3 === 1)); // 1,4,7...
const tag1 = openingTag ? `<div class='row m-b-0'>` : null; // null renders nothing in react

在jsx中具有准备好的布尔值，您可以：

{openingTag && <div class='row m-b-0'>}

但是如果不关闭它，它可能无法工作-将其用于整个组件或（结构化）块。

ReactDOM未呈现

1 个答案: