在地图功能中传递道具不起作用。将其作为密钥传递

Question

我将数组作为道具从 App.js 传递到组件 B。数组：

myOptions: [
{
    id: 1,
    option: "Option1"
},
{
    id: 2,
    option: "Option2"
},
{
    id: 3,
    option: "Option3"
}
]

从 App.js 我将其传递给组件 B：

<ComponentB 
    options={this.state.myOptions}
/>

组件 B:

import React from 'react';

import ComponentC from './ComponentC';


function ComponentB (props) {

  function renderOptions(key) {
    return(
      <ComponentC
        key={key.option}
        optionContent={key.option} //this is my question
        answers={props.option}
      />
    );
}

    return (
        <div>
        <h3> ComponentB </h3>
        {props.options.map(renderOptions)}
      </div>
    );

}

export default ComponentB;

ComponentC只显示optionContent:

import React from 'react';

function ComponentC(props) {
  return (
    <div>
        {props.optionContent}
    </div>
  );
}

export default ComponentC;

虽然代码工作正常，但我不确定为什么在 renderOptions 函数中，我需要使用 key.option 来传递 optionContent={key.option} 属性。当我使用 props.option 时，它不起作用。

是否因为renderOptions函数嵌套在ComponentB函数中？

Answer 1

首先，您应该了解 map() 的工作原理。

在您的代码中，

function ComponentB (props) {
  function renderOptions(key) {
    return(
      <ComponentC
        key={key.option}
        optionContent={key.option} //this is my question
        answers={props.option}
      />
    );
  }
  return (
      <div>
      <h3> ComponentB </h3>
      {props.options.map(renderOptions)}
    </div>
  );
}

你这样使用 map() {props.options.map(renderOptions)} 看起来没问题。

但是你应该对map()的论点有所了解。

你能读懂

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

通常，map() 有 3 个参数并使用其中的 2 个。 currentValue 和 index.

然后，return 再次输入您的代码。

你传递了你的函数 renderOptions() 本身。

表示renderOptions()可以得到map()

的所有参数

你可以触摸currentValue、index和其他东西。

但是，renderOptions() 只有一个参数 key。

（如果你想触及所有参数你应该这样写 function renderOptions(v, i, arr) ）

因此，您只能触摸 key 作为 currentValue。

和currentValue有Array的每一项。

{
    id: 1,
    option: "Option1"
}

你必须像那样重写你的代码。

function renderOptions(v,i,arr) {
    return(
      <ComponentC
        key={v.id} // because the key should be unique.
        optionContent={v.option} 
        answers={arr} // Actually, I don't understand this purpose.
      />
    );
}

在地图功能中传递道具不起作用。将其作为密钥传递

Passing props in map function doesn't work. Passing it as key works

javascript

arrays

array-map

reactjs