Question

我有一些类似的对象：

'key': { a: 'aa', b:'bb', c: <Component/> }

该对象作为某些对象的属性返回：

{item.a}
{item.b}
{item.c}

item.c-是一个字符串，但是我需要在渲染中使用真实的组件。非常感谢您的回答！

Answer 1

您会将值转换为箭头函数。

工作示例：

const data = { 
    a: () => 'aa',
    b: () => 'bb',
    c: () => <Component />
}

const App = props =>
    <div>
        {data.a()}
        {data.b()}
        {data.c()}
    </div>

const Component = props => <p>Comp</p>

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<div id='root'>

仅将组件存储在变量中也可以*起作用：

const Component = props => <p>Comp</p>

const data = { 
    a: 'aa',
    b: 'bb',
    c: <Component />
}

const App = props =>
    <div>
        {data.a}
        {data.b}
        {data.c}
    </div>


ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<div id='root'>

Answer 2

它应该可以正常工作，这里的Component是一个函数，调用item.c应该为您提供对该函数的引用。仔细检查您的代码，如果它不起作用，则需要提供更多详细信息，例如调用方式。

取一个字符串但需要react组件

2 个答案: