javascript - react 创建动态组件

Question

我有li key={Info.id}> 我想在点击对应的 id 值时<div>{NumberStatus} </div>输出对应的值的数据。id

综上所述，当点击'one li tag text'时，div会输出'one text'对应的'{NumberStatus}'值，以及{functionInfolabels}对应的值。

你想怎么写代码？

 let functionInfolabels = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.ingredientDisplayText);

let NumberStatus = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.chartStatus) 
   

return (
          {ProductDetail && ProductDetail.chart?.functionalsInfo?.length ? 
            ProductDetail.chart?.functionalsInfo.map(Info => (
            <li key={Info.id}>{Info.seedShapeDisplayText}</li>
            )) : <li>There is not</li>}

// seedShapeDisplayText; // one two three four five ... 

// <li key===1 onClick <div> Hi Number Minsu, Bar : 1 </div>
// <li key===2 onClick <div> Hi Number Jenny, Bar : 3 </div>
....
<div>
Hi Number {NumberStatus} // one : Minsu, two : Jenny, three : Youngmin, four : Jiho ...

<Bar 
labels={functionInfolabels} // one : 1, two: 3, three: 124 .... 
/>
</div>


)

标签： javascriptreactjsecmascript-6jsx

Answer 1

如果您可以对您的问题进行更多解释，我认为这将很容易理解和回答。

这是我收到您的问题时的解决方案，

在这里，我使用状态numberStatus，当您单击任何我正在使用所选 li 的 numberStatus 数据li设置状态时。numberStatus

同样在底部渲染部分，我正在检查状态numberStatus是否具有值，如果我让它显示。

function MyComponent() {
  const [numberStatus, setNumberStatus] = React.useState("");

  const dataList = [
    { title: "Title 01", numberStatus: "one" },
    { title: "Title 02", numberStatus: "two" },
    { title: "Title 03", numberStatus: "three" },
  ];

  return (
    <div>
      <ul>
        {dataList.map((val, key) => {
          return (
            <li key={key} onClick={() => setNumberStatus(val.numberStatus)}>
              {" "}
              {val.title}{" "}
            </li>
          );
        })}
      </ul>

      {numberStatus && <div>Hi Number {numberStatus}</div>}
    </div>
  );
}