ReactDOM 未呈现

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>

I am used to using jQuery when I implement like jQuery inside reactjs but in react can not render.

下面是我的代码。

我该如何解决？

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

可以在反应中呈现 'raw html'（f.e.dangerouslySetInnerHTML 或片段）但是使用反应来粘合 strings/html 部分是一个不好的做法。

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

您必须构建更接近要求的组件 html。在这种情况下（您没有显示数据结构），我会将数据分为 3 个元素集 returning complete ('row') structure/fragment 一步完成：

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 多个节点，这样的事情应该可以工作：

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

有很多可能性，但您必须 'think in react'，更结构化的方式 ;)

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 未呈现

ReactDOM is not rendering

javascript

html

reactjs

jsx

react-component