相关疑难解决方法(0)

我有一个像这样的对象

export const otherInformation = [
{
    "FAQ": ['Getting started guide', 'Selling policy'],
    "Help & Support": ['Help guide', 'Selling policy'],
    "Legal": ['Terms of Use', 'Privacy Policy']
}]

我的代码

class Information extends Component {
    render() {
        const otherInformationLoop = otherInformation.map((value, key) => {
            return (
                <div>
                    <div className="col-md-4" key={key}>
                        <div className="dashboard-info">

                            {Object.keys(value).map((val, k) => {
                                return (<h4 k={k}>{val}</h4>)
                                })
                            }

                        </div>
                    </div>
                </div>
            )
        })

        return (
            { otherInformationLoop }
            // <div></div>
        );
    }
}

我无法循环遍历该对象.

获得的错误是这样的

Information.render(): A valid React …

我有一个条件语句来打印一个字段，如果它不是我想要的空值，然后是一个换行符。此语句存在于<div></div>. 似乎<br />不能在{...}语句中使用（或任何其他 jsx）。

如果满足条件，我想要发生的是有条件地打印我的字符串和换行符。下面我将展示实际发生的事情。

<div>
    {this.props.string ? "$" + this.props.string + <br /> : null}
</div>

在这种情况下，<br />呈现为[object Object].

我也试过

<div>
    {this.props.string ? "$" + this.props.string + "\n" : null}
</div>

但是 "\n" 是按字面打印的。

为什么<br />被渲染为[object Object]？我需要做什么才能达到我想要的结果？

这个问题与此处发现的问题不同，因为我正在寻找内联解决方案，而不必构建具有单个值的数组。