Question

我试图将多个变量从一个功能组件传递给其他反应组件。但是每次我遇到错误时。

这是组件const checkSVGExists = () => { if (ref.current) { let parentDiv = d3.select(ref.current); if (parentDiv.node().querySelector("svg") !== null) { let svg = parentDiv.select("svg"); } } }; useEffect(() => { const timer = setTimeout(() => { checkSVGExists(); }, 1000); return () => clearTimeout(timer); });的代码，我试图从中传递值。

Sports.js

Sports.js

Table_Sports.js

// initiallising states
const [items1, setItems1] = useState({
pageCount: '',
field_names_state: [],
toggle: false,
elements: [],
data_form: [],
sports_id: '',
buttonEnable: '1',
});

// map our fetched data and send it to Table_Sports.js

const data1 = items1.elements.map((item) => (
<Table_Sports key={item.sports_id} item={item} action={onRadioChange} />
));

这里我正在获取<td> <input type='radio' // defaultValue={props.item.sports_id} defaultValue={props.} name='sports_id' onClick={(e) => props.action(e)} /> </td> <td> <input type='text' defaultValue={props.item.sports_name} name='sports_name' contentEditable='true' /> </td>以外的所有elements的所有映射数据。
我也如何获取buttonEnable的值？

Answer 1

这可以将buttonEnable道具发送到您的Table_Sports。但是我不确定您要做什么，因为elements有一个length === 0

const data1 = items1.elements.map((item) => (
  <Table_Sports
    key={item.sports_id}
    item={item}
    action={onRadioChange}
    buttonEnable={items1.buttonEnable}
  />
));

然后，通过以下方式获取它：

<input
  type='radio'
  // defaultValue={props.item.sports_id}
  defaultValue={props.}
  name='sports_id'
  onClick={(e) => props.action(e)}
  // HERE
  disabled={props.buttonEnable !== '1'}
/>

Answer 2

您正在映射items1.elements.map((item)，尽管items1.elements中的项目不包含buttonEnable属性，要将buttonEnable属性传递给子组件，只需添加一个道具<Table_Sports isButtonEnable isButtonEnable={item1.buttonEnable} />和其余道具即可。

如何在React js中将多个变量从一个功能组件传递到另一个功能组件？

2 个答案: