如何在字符串中插入prop以在不同JSX文件中使用

基础用法：直接用模板字符串插入Prop #

把硬编码的字符串换成ES6模板字符串，用${}语法插入props里的值即可，示例：

const TypingGame = (props) => {
  // 直接插入prop值
  const initialSentence = `${props.targetWord}`;
  // 也可以拼接成更复杂的句子
  const promptSentence = `请输入单词：${props.targetWord}`;

  return <div>{promptSentence}</div>;
};

跨文件复用：抽离字符串生成逻辑 #

如果要让这个字符串能在多个JSX文件里使用，别把生成逻辑写死在单个组件里，抽成单独的工具函数：

1. 新建一个工具文件（比如sentenceUtils.js）：

export const getInitialSentence = (props) => {
  // 这里可以写任意自定义的字符串生成逻辑
  return `${props.targetWord}`;
};

2. 在需要的组件里导入使用：

// TypingGame.jsx
import { getInitialSentence } from './sentenceUtils';

const TypingGame = (props) => {
  const initialSentence = getInitialSentence(props);
  return <div>{initialSentence}</div>;
};

// 另一个组件比如WordPrompt.jsx
import { getInitialSentence } from './sentenceUtils';

const WordPrompt = (props) => {
  const promptText = getInitialSentence(props);
  return <p>{promptText}</p>;
};

额外提示：处理Prop默认值 #

避免prop未传递时出现undefined，可以给prop加默认值：

// 解构赋值时加默认值
const TypingGame = ({ targetWord = 'banana' }) => {
  const initialSentence = `${targetWord}`;
  return <div>{initialSentence}</div>;
};

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