React如何将Data.js内span标签的letter数据传递给RenderLetter组件

解决方案 #

你当前的写法无效是因为：sendLetter 是你给原生<span>标签加的自定义属性，不会自动传递给同级的RenderLetter组件，你需要通过React组件的props机制传递对应数据，分两种常见场景处理：

场景1：需要将所有span对应的letter全部传给RenderLetter

直接把拆分后的字符数组作为props传递即可，修改后的代码如下：

Data.js 修改后代码

import { useState, useEffect } from "react";
import RenderLetter from "./RenderLetter";

function Data({ randomData, getInput }) {
  const [dummyData, setDummyData] = useState(null);
  // 提前拆分字符，统一复用
  const letterList = dummyData ? dummyData.split("") : [];

  return (
    <div>
      {dummyData ? (
        <div>
          {letterList.map((letter, i) => {
            let color;
            if (i < getInput.length) {
              color = letter === getInput[i] ? "green" : "red";
            }
            return (
              <span key={i} style={{ background: color }}>
                {letter}
              </span>
            );
          })}
          {/* 把全部letter数组传给RenderLetter */}
          <RenderLetter sendInput={getInput} sendLetter={letterList} />
        </div>
      ) : (
        <div>Loading</div>
      )}
    </div>
  );
}

export default Data;

此时RenderLetter里拿到的sendLetter就是所有字符组成的数组，可以直接和sendInput搭配做逻辑处理。

场景2：点击对应span时，传递当前选中的单个letter给RenderLetter

需要新增state存储选中的letter，给span绑定点击事件赋值：

Data.js 修改后代码

import { useState, useEffect } from "react";
import RenderLetter from "./RenderLetter";

function Data({ randomData, getInput }) {
  const [dummyData, setDummyData] = useState(null);
  // 新增state存储选中的letter
  const [selectedLetter, setSelectedLetter] = useState(null);

  return (
    <div>
      {dummyData ? (
        <div>
          {dummyData.split("").map((letter, i) => {
            let color;
            if (i < getInput.length) {
              color = letter === getInput[i] ? "green" : "red";
            }
            return (
              <span 
                key={i} 
                style={{ background: color, cursor: 'pointer' }}
                // 点击时把当前letter存入state
                onClick={() => setSelectedLetter(letter)}
              >
                {letter}
              </span>
            );
          })}
          {/* 把选中的单个letter传给RenderLetter */}
          <RenderLetter sendInput={getInput} sendLetter={selectedLetter} />
        </div>
      ) : (
        <div>Loading</div>
      )}
    </div>
  );
}

export default Data;

此时点击任意span，RenderLetter里的sendLetter就会更新为你点击的对应字符。

内容的提问来源于stack exchange，提问作者ErDevFy