React中的渲染对象属性

Question

我有一个这样的物体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 element (or null) must be returned. You may have returned undefined, an array or some other invalid object我如何循环通过该对象，以便获得所获得的结果提前致谢。任何帮助表示赞赏

Answer 1

您正在渲染数组，但只能从react组件返回一个块，将map函数包装在div中

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 (

            <div>{ otherInformationLoop }</div>

        );

    }

}

Answer 2

实际上，render方法返回的对象只有一个otherInformationLoop属性。只需返回该值，而无需任何括号即可在React 16+中使用（但每个外部div都需要一个关键道具）