Question

我想在地图中创建条件渲染。数据来自具有以下结构的JSON文件： export const products = [

[    
        {
            "scores": {
                "quality": 8,
                "relevancy": {
                    "design": 3,
                    "code": 9,
                    "business": 5
                }
            },
            "title": "AdCall: Bringing WebRTC to display ads",
            "subtitle": "The first advertising banner with video calls",
            "content": [
                {
                    "type": "text",
                    "body": "AdCall is a concept for a new kind of online advertising banner. Using WebRTC, it allows for a click to call action with the aim of increasing conversions. It's built with a Node backend and deployed on Heroku."
                }
            ]
        }
    ]

所以我通过数组创建了一个地图，然后我想根据类型来渲染内容部分。我为此使用了双重映射，我需要在第二张地图中使用条件，但它不起作用：

return(
            <div className="LongWork">
                { products.map((product, i) => {
                    <div className="product-wrapper" key={i}>
                        <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div>
                        <div className="title">{product.title}</div>
                        {product.content.map((content, l) => {
                            <div className="product-content" key={l}>
                                {if(content.type==="text"){
                                    return (
                                        <div className="productText">
                                            {content.body}
                                        </div>
                                    )} 
                                }}
                            </div>

                        })}
                    </div>
                } )}

Answer 1

使用ternary operator进行条件渲染，因为if-else我们无法在JSX内使用。

另一个问题是，您没有在map正文中返回任何内容，因此也请使用return来返回元素。

为什么我们不能在JSX中使用if-else？

检查此答案以获得解释：if-else statement inside jsx: ReactJS

像这样写：

<div className="LongWork">
    {products.map((product, i) => {
        return (
            <div className="product-wrapper" key={i}>
                <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div>
                <div className="title">{product.title}</div>
                {product.content.map((content, l) => {
                    return(
                        <div className="product-content" key={l}>
                            {content.type === "text" ?
                                <div className="productText">
                                    {content.body}
                                </div>
                            : null}
                        </div>
                    )
                })}
            </div>
        )
    })}
</div>

<强>更新

使用dangerouslySetInnerHTML呈现html字符串。

检查此代码段：

let str = "<div>Hello Ocram</div>"

let App = () => {
   return(
       <div>
          <div dangerouslySetInnerHTML={{ __html: str }}></div>
       </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

更改地图功能代码：

return(
                <div className="LongWork">
                    { products.map((product, i) => {
                        return <div className="product-wrapper" key={i}>
                            <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div>
                            <div className="title">{product.title}</div>
                            {product.content.map((content, l) => {
                                return <div className="product-content" key={l}>
                                    if(content.type==="text"){
                                        return (
                                            <div className="productText">
                                                {content.body}
                                            </div>
                                        )} 
                                    }}
                                </div>

                            })}
                        </div>
                    } )}

删除上面文件中if语句之前的大括号

希望它可能会有所帮助。

快乐的编码!!

条件内部映射JSX

2 个答案: