如何从对象本身中引用 json 字段答案

【问题标题】：How to refer json field from within object itself如何从对象本身中引用 json 字段
【发布时间】：2019-07-17 11:48:47
【问题描述】：

我想将无状态视图组件分离到一个文件中，同时尽可能缩短代码。

所以我有一些 View.js，带有：

export default {
    MySpan: (a)=>(<span>a.someValue</span>),
    MyDoubleSpan: (a,b)=>(<div><MySpan someValue={a} /><MySpan someValue={b} /><div/>)
}

App.js 内部是这样的：

import View from './View';
...
render() {
    return(<View.MyDoubleSpan a="a" b="b"/>);
}

您可能会直观地得到我所期望的。但是（当然）这行不通。如何摆脱这种典型情况？或者我如何才能直接从该对象的另一个字段中引用当前定义对象的某些（已定义）字段？

【问题讨论】：

如果更改 MySpan 和 MyDoubleSpan 的顺序，它会改变什么吗？

标签： json reactjs jsx

【解决方案1】：

我自己设法得到了答案！它在导出之前定义组件，并通过名称引用它：

const View = {
    MySpan: (a)=>(<span>a.someValue</span>),
    MyDoubleSpan: (a,b)=>(
    <div>
        <View.MySpan someValue={a} />
        <View.MySpan someValue={b} />
    <div/>)
};
export default View;

【讨论】：

【解决方案2】：

创建一个返回 span 数组的组件（您可以在 react 中执行此操作）。这样，返回的 span 数量将与作为 props 传递的数组的长度相同。干净吗？

const SpanComponent = ({content:['a','b']}) => content.map(item=><MySpan someValue={item} />

【讨论】：

这与数组映射无关。考虑一下，我需要跨度，然后是 div .. 首先SpanComponent 必须在你export default {MySpan:() SpanComponent: ??? } 的json 对象内第二它会给你一个错误 MySpan is not defined 在这种情况下。这就是问题 - 如何从该对象定义中引用已定义的对象字段？
好的。看来你找到了答案！