Reactjs React更新来自另一个组件的无状态组件 导出默认函数App（）{return（）} 导出默认函数customButton（）{返回（更新）}

因为应用程序是父组件，按钮和表是子组件。我知道这不是最佳实践，但如何从按钮组件更新（重新渲染）表组件？

实现这一点的方法是在最近的祖先处拥有一些共享状态。在下面的示例中，我在

App

中创建了一个

value

状态变量，并将其传递给

customTable

元素。我有一个

setValue

setter，它被传递到

customButton

。单击按钮时，更新

值

并将其传递给

customTable

，从而使表格使用该新值重新呈现

export default function App() { return(<div><customButton/><customTable/></div>) }
export default function customButton() { return(<div><button>update</button></div>) }

导出默认函数App（）{
const[value，setValue]=React.useState（0）；
返回(
)
}
导出默认函数customButton（{setValue}）{
返回(
setValue（v=>v+1）}>update
) 
}

使用自定义表和自定义按钮的示例应用程序

export default function App() {
  const [value, setValue] = React.useState(0);
  return(
    <div>
      <customButton setValue={setValue} />
      <customTable value={value} />
    </div>
  )
}

export default function customButton({ setValue }) {
  return(
    <div>
      <button onClick={() => setValue(v => v + 1)}>update</button>
    </div>
  ) 
}

功能自定义按钮（道具）{
返回{props.children}
}
函数CustomTable（{table}）{
返回(
不
名称
{table.map（（项目，i）=>(
{i.toString（）}
{item.name}
))}
);
}
函数App（）{
常量[input，setInput]=React.useState（“”）
常量[可设置，可设置]=React.useState([
{姓名：“约翰”}，
{name:“Bukky”}，
{name:“Behem”}
]);
常量handleInput=e=>{
设置输入（如目标值）
}
const addClick=e=>{
const update=[…表，{name:input}]；
可设置（更新）；
设置输入（“”）
};
返回(
单击以添加
);
}

简单的方法是创建一个状态和一个函数来更改父组件中的该状态，然后将该函数作为子组件的道具传递到子组件中，并在子组件中执行该函数。请参阅@iamjcc检查我为您的帮助创建的此解决方案，谢谢分享。但是按钮只允许它更新一次。当我点击时如何更新？嗯，状态可以是你想要的任何状态。我将更新它，使其继续递增。

function CustomButton(props) {
  return <button onClick={props.addClick}>{props.children}</button>
}
function CustomTable({ table }) {
  return (
    <table>
      <thead>
        <tr>
          <th>No.</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        {table.map((item, i) => (
          <tr key={i.toString()}>
            <td>{i.toString()}</td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
function App() {
  const [input, setInput] = React.useState('')
  const [table, setTable] = React.useState([
    { name: "John" },
    { name: "Bukky" },
    { name: "Behem" }
  ]);
  const handleInput = e=>{
    setInput(e.target.value)
  }
  const addClick = e => {
    const update = [...table, { name: input }];
    setTable(update);
    setInput('')
  };
  return (
    <div>
      <input type="text" value={input} onChange={handleInput}/>
      <CustomButton addClick={addClick}>Click to Add</CustomButton>
      <CustomTable table={table} />
    </div>
  );
}